首页 > 代码库 > 前端的小Demo——涉及keyCode

前端的小Demo——涉及keyCode

2024-07-15 05:42:44   222人阅读

以下是我的代码：

<!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://www.mamicode.com/"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>1){ typeTxt-=1;  $("#txt").val(typeTxt);}        else{ alert("数字不能小于1"); }        }    function down(){        typeTxt = $("#txt").val();        if(typeTxt>=1){ typeTxt++; $("#txt").val(typeTxt);}        else{ alert("数字不能小于1");}    }    $("#txt").keyup(function(e){        if(e.keyCode == 38){ down(); }        if(e.keyCode == 40) { 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>1?oInp2.value-=1:alert("不能小于1");        };    oInp3.onclick=function(){        oInp2.value=parseInt(oInp2.value)+1;        };        //大0  48    //大9  57    //小0  96    //小9  105        //退格 8    oInp2.onkeydown=function(ev){        var ev=ev||event;        if(((ev.keyCode<48  || ev.keyCode>57) && (ev.keyCode!=8)) && (ev.keyCode<96  || ev.keyCode>105) ){                return false;        }    };    oInp2.onkeyup=function(){        if(this.value<1 && ev.keyCode!=8)        {            this.value=http://www.mamicode.com/1            }        };}</script></head><body><input id="inp1" type="button" value=http://www.mamicode.com/"-"><input id="inp2" style=" width:30px; text-align:center;" type="text" value=http://www.mamicode.com/"5"><input id="inp3" type="button" value=http://www.mamicode.com/"+"><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://www.mamicode.com/"http://code.jquery.com/jquery.js"></script><script>$(function(){    var typeTxt;        //只能输入大于1的数字    $("#txt").keyup(function(){        if(isNaN($(this).val()) || parseInt($(this).val())<1){            $(this).val("");            }        else{typeTxt = $(this).val();    }    });           function up(){        typeTxt = $("#txt").val();        if(typeTxt>1){            typeTxt-=1;            $("#txt").val(typeTxt);        }        else{            alert("数字不能小于1");            }        }    function down(){        typeTxt = $("#txt").val();        if(typeTxt>=1){            typeTxt++;            $("#txt").val(typeTxt);        }        else{            alert("数字不能小于1");            }    }    $("#txt").keyup(function(e){        if(e.keyCode == 38)        down();        if(e.keyCode == 40)        up();    });        $("#btn1").click(function(){        up();    });    $("#btn2").click(function(){        down();    });            })</script></html>

 


联系
我们