码迷,mamicode.com
首页 > 其他好文 > 详细

前端的小Demo——涉及keyCode

时间:2014-08-01 13:02:31      阅读:255      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   java   io   2014   cti   

bubuko.com,布布扣

以下是我的代码:

<!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>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=1    
        }    
    };
}
</script>
</head>

<body>
<input id="inp1" type="button" value="-">
<input id="inp2" style=" width:30px; text-align:center;" type="text" value="5">
<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())<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>

 

前端的小Demo——涉及keyCode,布布扣,bubuko.com

前端的小Demo——涉及keyCode

标签:style   blog   http   color   java   io   2014   cti   

原文地址:http://www.cnblogs.com/wanliyuan/p/3884562.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!