输入框过滤非数字的js代码

 更新时间:2014年09月18日 17:21:12   投稿:whsnow  
这篇文章主要介绍js过滤输入框中非数字的字符,很简单,但很实用,需要的朋友可以参考下

HTML:

复制代码 代码如下:

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

JS:

window.onload=function(e){
var text=document.getElementById("only"),pattern=/\d/,//pattern匹配字母上的数字键
pattern2=/(9[6-9])|(10[0-5])|3(7|9)/,//pattern2匹配小键盘上的数字键和左右方向键
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;//不同事件的事件对象不一样,这个event和最前面的event不相等
if(!pattern.test(String.fromCharCode(event.keyCode))&&event.keyCode!=8//keyCode=8是退格键,因为可以对输入的数字进行修改,所以退格和左右方向键不禁止
&&!pattern2.test(event.keyCode.toString())||event.shiftKey||
event.ctrlKey||event.metaKey){
EventHandle.preventDefault(event);//如果不用对象的这个方法,写成下面这样,也可以执行,不过每次按下键盘的时候都会进行一次判断
                               //这个是没有必要的,所以在页面加载的时候对事件处理对象定义一个方法,加载后对象的方法就已经是确定的了,以后时候就可以了

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

未注释版本:

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版本进行调试

相关文章

  • 原生JS实现动态添加新元素、删除元素方法

    原生JS实现动态添加新元素、删除元素方法

    这篇文章主要介绍了原生js实现动态添加新元素、删除元素方法 ,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)

    PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)

    PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)...
    2007-08-08
  • $()JS小技巧

    $()JS小技巧

    $()JS小技巧...
    2007-07-07
  • SwfUpload在IE10上不出现上传按钮的解决方法

    SwfUpload在IE10上不出现上传按钮的解决方法

    在测试中发现使用了SwfUpload实现的无刷新上传功能,在IE10上竟然无法使用了,难道SwfUpload不支持吗?下面与大家分享下通过修改SwfUplad.JS文件让其支持ie10
    2013-06-06
  • js中关于String对象的replace使用详解

    js中关于String对象的replace使用详解

    关于String对象的replace使用详解,需要的朋友可以参考下。
    2011-05-05
  • Javascript幻灯片播放功能实现过程解析

    Javascript幻灯片播放功能实现过程解析

    这篇文章主要介绍了Javascript幻灯片播放功能实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • JavaScript中的DOM遍历详解

    JavaScript中的DOM遍历详解

    文档对象模型 (DOM) 表示 HTML 文档的结构,导航或“遍历”此结构是 Web 开发的基本方面,使开发人员能够在网页上选择、修改、删除或添加内容,本文深入研究了使用 JavaScript 进行 DOM 遍历的艺术,提供了一个强大的工具包来处理各种遍历场景
    2023-09-09
  • 使用Promise和JavaScript有效处理1000个请求的方法

    使用Promise和JavaScript有效处理1000个请求的方法

    在现代Web开发中,处理高并发请求是一个常见的挑战,当我们需要从服务器获取大量数据或执行多个异步任务时,如何有效地管理请求的并发性和性能变得至关重要,本文将介绍如何使用Promise和JavaScript来管理高并发请求,需要的朋友可以参考下
    2023-09-09
  • js 对小数加法精度处理示例说明

    js 对小数加法精度处理示例说明

    javascript的加法结果会有误差,在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果,下面为大家介绍下js如何对小数加法精度处理
    2013-12-12
  • JavaScript中的for循环与双重for循环详解

    JavaScript中的for循环与双重for循环详解

    这篇文章主要给大家介绍了关于JavaScript中for循环与双重for循环的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03

最新评论