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

输入框过滤非数字

时间:2014-09-18 18:14:34      阅读:266      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   os   ar   2014   div   

HTML:<input type="text" id="only"/>

JS:


 1 window.onload=function(e){
 2         var text=document.getElementById("only"),pattern=/\d/,//pattern匹配字母上的数字键
 3                 pattern2=/(9[6-9])|(10[0-5])|3(7|9)/,//pattern2匹配小键盘上的数字键和左右方向键
 4                 EventHandle={},event=e||window.event;//一个处理事件的对象
      //当网页加载的时候,进行判断,对事件处理对象进行定义属性,这样对事件对象的方法只需要进行一次判断,以后的其他事件
      //处理程序里面不需要判断
 5         if(event.preventDefault){
 6             EventHandle.preventDefault=function(e){
 7                 e.preventDefault();
 8             };
 9         }else{
10             EventHandle.preventDefault=function(e){
11                 e.returnValue=false;
12             }
13         }
14         text.onkeydown=function(e){
15             var event=e||window.event;//不同事件的事件对象不一样,这个event和最前面的event不相等
16             if(!pattern.test(String.fromCharCode(event.keyCode))&&event.keyCode!=8//keyCode=8是退格键,因为可以对输入的数字进行修改,所以退格和左右方向键不禁止
17                     &&!pattern2.test(event.keyCode.toString())||event.shiftKey||
18                     event.ctrlKey||event.metaKey){
19                 EventHandle.preventDefault(event);//如果不用对象的这个方法,写成下面这样,也可以执行,不过每次按下键盘的时候都会进行一次判断
                               //这个是没有必要的,所以在页面加载的时候对事件处理对象定义一个方法,加载后对象的方法就已经是确定的了,以后时候就可以了

                                //if(event.preventDefault){
                                //event.preventDefault();
                                //}else{
                                //event.returnValue=false;
                                //}

20             }
21         }
22     }

未注释版本:

window.onload=function(e){
        var text=document.getElementById("only"),pattern=/\d/,
                pattern2=/(9[6-9])|(10[0-5])|3(7|9)/,
                EventHandle={},event=e||window.event;
        if(event.preventDefault){
            EventHandle.preventDefault=function(e){
                e.preventDefault();
            };
        }else{
            EventHandle.preventDefault=function(e){
                e.returnValue=false;
            }
        }
        text.onkeydown=function(e){
            var event=e||window.event;
            if(!pattern.test(String.fromCharCode(event.keyCode))&&event.keyCode!=8
                    &&!pattern2.test(event.keyCode.toString())||event.shiftKey||
                    event.ctrlKey||event.metaKey){
                EventHandle.preventDefault(event);
            }
        }
    }

在IE11里面,F12打开开发者工具里面可以选择IE版本进行调试

bubuko.com,布布扣

输入框过滤非数字

标签:style   blog   http   color   io   os   ar   2014   div   

原文地址:http://www.cnblogs.com/wuxiandiejia/p/3979436.html

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