以下是我的代码：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>小效果</title>

<style>

    .type{width:32px;}

</style>

</head>

<body>

    <div>

        <button id="btn1">-</button>

        <input type="text" class="type"  id="txt">

        <button id="btn2">+</button>

    </div>

</body>

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>

<script>

$(function(){

    var typeTxt;

    //只能输入大于1的数字   
    $("#txt").keyup(function(){

            $(this).val($(this).val().replace(/[^1-9.]/g,''));

        }).bind("paste",function(){

            $(this).val($(this).val().replace(/[^1-9.]/g,''));

    }).css("ime-mode", "disabled"); 

    //取值

    $("#txt").change(function(){

        typeTxt = $("#txt").val();

    })

    function up(){

        typeTxt = $("#txt").val();

        if(typeTxt>){ typeTxt-=;  $("#txt").val(typeTxt);}

        else{ alert("数字不能小于1"); }

    }

    function down(){

        typeTxt = $("#txt").val();

        if(typeTxt>=){ typeTxt++; $("#txt").val(typeTxt);}

        else{ alert("数字不能小于1");}

    }

    $("#txt").keyup(function(e){

        if(e.keyCode == ){ down(); }

        if(e.keyCode == ) { up();}

    });

    $("#btn1").click(function(){  up(); });

    $("#btn2").click(function(){ down(); });

})

</script>

</html>

用的是正则表达式的方法。

下面是主管的代码：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script>

window.onload=function(){

    var oInp1=document.getElementById("inp1");

    var oInp2=document.getElementById("inp2");

    var oInp3=document.getElementById("inp3");

    oInp1.onclick=function(){

        oInp2.value>?oInp2.value-=:alert("不能小于1");

    };

    oInp3.onclick=function(){

        oInp2.value=parseInt(oInp2.value)+;

    };

    //大0  48

    //大9  57

    //小0  96

    //小9  105

    //退格 8

    oInp2.onkeydown=function(ev){

        var ev=ev||event;

        if(((ev.keyCode<  || ev.keyCode>) && (ev.keyCode!=)) && (ev.keyCode<  || ev.keyCode>) ){

            return false;

        }

    };

    oInp2.onkeyup=function(){

        if(this.value< && ev.keyCode!=)

        {

            this.value=

        }

    };

}

</script>

</head>

<body>

<input id="inp1" type="button" value="-">

<input id="inp2" style=" width:30px; text-align:center;" type="text" value="">

<input id="inp3" type="button" value="+">

<h3>要求</h3>

<ul>

    <li>点击加减按钮可以使文本框内数字增减1但不能小于1</li>

    <li>文本框内只能输入数字，并且大小键盘都可以，可以用退格键删除文本框里的内容</li>

    <li>文本框内不可输入小于1的整数</li>

</ul>

</body>

</html>

再下面，是我不用表达式的方案，不过还有个小bug

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>小效果</title>

<style>

    .type{width:32px;}

</style>

</head>

<body>

    <div>

        <button id="btn1">-</button>

        <input type="text" class="type"  id="txt">

        <button id="btn2">+</button>

    </div>

</body>

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>

<script>

$(function(){

    var typeTxt;

    //只能输入大于1的数字

    $("#txt").keyup(function(){

        if(isNaN($(this).val()) || parseInt($(this).val())<){

            $(this).val("");

        }

        else{typeTxt = $(this).val();    }

    });

    function up(){

        typeTxt = $("#txt").val();

        if(typeTxt>){

            typeTxt-=;

            $("#txt").val(typeTxt);

        }

        else{

            alert("数字不能小于1");

        }

    }

    function down(){

        typeTxt = $("#txt").val();

        if(typeTxt>=){

            typeTxt++;

            $("#txt").val(typeTxt);

        }

        else{

            alert("数字不能小于1");

        }

    }

    $("#txt").keyup(function(e){

        if(e.keyCode == )

        down();

        if(e.keyCode == )

        up();

    });

    $("#btn1").click(function(){

        up();

    });

    $("#btn2").click(function(){

        down();

    });

})

</script>

</html>

前端的小Demo——涉及keyCode的更多相关文章

  1. 一周一个小demo — 前端后台的交互实例

    这一周呢,本K在大神的指导下,完成了一个利用ajax与php文件上传处理相结合的一个留言板功能的小实例,下面就让本K来带大家瞅瞅如何实现这一种功能. 一.界面概览 首先我们来看一下这个小demo的具体 ...

  2. 新手 gulp+ seajs 小demo

    首先,不说废话,它的介绍和作者就不在多说了,网上一百度一大堆: 我在这里只是来写写我这2天抽空对seajs的了解并爬过的坑,和实现的一个小demo(纯属为了实现,高手请绕道); 一.环境工具及安装 1 ...

  3. js存款计算器原生小demo

    大家好,本人是初入前端的一枚程序猿,深知js底层开发的重要性,这也是我的软肋所在(曾经以为),渐渐的明白了一个道理,饭要一口口吃,路要一步步走,这也是我想告诉给所有刚刚进入IT行业的技术员们,沉下心, ...

  4. Swift基础之实现一个镂空图片的小Demo

    前两天看了别人的文章,涉及到了镂空的展示,所以我在这里把实现的内容写成Swift语言的小Demo,供大家欣赏 首先,需要创建导航视图,然后创建两种展示方式的按钮 let vc = ViewContro ...

  5. H5 PWA技术以及小demo

    H5 PWA技术 1.原生app优缺点 a.体验好.下载到手机上入口方便 b.开发成本高(ios和安卓) c.软件上线需要审核 d.版本更新需要将新版本上传到不同的应用商店 e.使用前需下载 2.we ...

  6. 移动端页面弹幕小Demo实例说明

    代码地址如下:http://www.demodashi.com/demo/11595.html 弹幕小Demo实例地址,点击看效果 写在前面:尝试做了一下弹幕的实例,欢迎提出并指正问题 问题说明: D ...

  7. 2、链接数据库+mongodb基础命令行+小demo

    链接数据库并且打印出数据的流程:1.在CMD里面输入 mongod 2.在CMD里面输入 mongo 3.在输入mongodb命令行里面进行操作,首先输入 show dbs 来查看是否能够链接得上库4 ...

  8. js特效 15个小demo

    js特效和15个小demo 代码如下:images文件夹未上传 1.图片切换: <!DOCTYPE html> <html> <head> <title> ...

  9. SpringBoot-Vue实现增删改查及分页小DEMO

    前言 主要通过后端 Spring Boot 技术和前端 Vue 技术来简单开发一个demo,实现增删改查.分页功能以及了解Springboot搭配vue完成前后端分离项目的开发流程. 开发栈 前端 开 ...

随机推荐

  1. PAT Ranking (排名)

    PAT Ranking (排名) Programming Ability Test (PAT) is organized by the College of Computer Science and ...

  2. kappa 一致性系数计算实例

    kappa系数在遥感分类图像的精度评估方面有重要的应用，因此学会计算kappa系数是必要的 实例1 实例2

  3. iOS 深复制&浅复制

        1.无论是深复制还是浅复制,被复制的对象类型是不变的.此对象类型具有什么功能就具有什么功能,不会因为自行修改了返回对象的指针类型而改变.   比如: 这里的str和str1的值和指针地址完全一 ...

  4. Spring execution 表达式

    execution(modifiers-pattern? ret-type-pattern declaring-type-pattern? name-pattern(param-pattern) th ...

  5. How to open MS word document from the SharePoint 2010 using Microsoft.Office.Interop.dll

    or this you must change the identity of word component inC:\windows\System32\comexp.mscto be interac ...

  6. MS SQL Server时间常用函数

    SQLServer时间日期函数详解,SQLServer,时间日期, 1.      当前系统日期.时间 select getdate() 2. dateadd      在向指定日期加上一段时间的基础 ...

  7. HttpWebRequest

    同步请求=====================================================================================  byte[] da ...

  8. UINavigationController 总结

    一 . UINavigationBar 1.获取 UINavigationBar 对象: [UINavigationBar appearance] ,可以通过该方法对全部 navigation 进行设 ...

  9. ionicPopup确认对话框

    $ionicPopup.confirm({ title: $rootScope.app_name, template: 'Do you want to add this to database?', ...

  10. c++ 小片段

    void test_string() { string sen = "Connection will be closed if there is no " "read/w ...