输入框过滤非数字的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版本进行调试

相关文章

  • uniapp APP消息推送方案实现全过程

    uniapp APP消息推送方案实现全过程

    前段时间开发app的时候要开始做消息推送功能了,下面这篇文章主要给大家介绍了关于uniapp APP消息推送方案实现的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • js实现同一页面可多次调用的图片幻灯切换效果

    js实现同一页面可多次调用的图片幻灯切换效果

    这篇文章主要介绍了js实现同一页面可多次调用的图片幻灯切换效果,可实现在同一页面中多次调用幻灯切换效果,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • js实现弹幕墙效果

    js实现弹幕墙效果

    这篇文章主要为大家详细介绍了js实现弹幕墙效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • Webpack如何引入bootstrap的方法

    Webpack如何引入bootstrap的方法

    本篇文章主要介绍了Webpack如何引入bootstrap的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • ie支持function.bind()方法实现代码

    ie支持function.bind()方法实现代码

    在 google 一番技术资料后,发现 firefox 原生支持一个 bind 方法,该方法很好的满足了我们的初衷,调用方法与 call 和 apply 一样,只是定义完成后,在后期调用时该方法才会执行,需要的朋友可以了解下
    2012-12-12
  • javascript showModalDialog传值与FireFox的window.open 父子窗口传值示例

    javascript showModalDialog传值与FireFox的window.open 父子窗口传值示例

    javascript showModalDialog传值与FireFox的window.open 父子窗口传值示例代码。
    2009-11-11
  • JavaScript实现枚举的几种方法总结

    JavaScript实现枚举的几种方法总结

    在前端开发中,我们可能经常需要用到枚举,使用枚举的好处是为了让代码的可读性更强,避免直接使用数字或未知的字符串,但是在JavaScript中,要自己实现一个枚举功能,那么大家能想到多少种实现枚举的方法呢,我将介绍几种实现枚举的好方法
    2023-08-08
  • JS暴虐查找法简洁版

    JS暴虐查找法简洁版

    有过相关经验的朋友都知道,Jscript的效率毕竟有限,在数组中查找数据时如果用常规的算法来做执行起来会很慢。
    2008-07-07
  • 通过实例解析js可枚举属性与不可枚举属性

    通过实例解析js可枚举属性与不可枚举属性

    这篇文章主要介绍了通过实例解析js可枚举属性与不可枚举属性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-12-12
  • js中事件的处理与浏览器对象示例介绍

    js中事件的处理与浏览器对象示例介绍

    本文为大家详细介绍下js中关于简单事件的处理与浏览器对象,下面有个不错的示例,感兴趣的朋友可以参考下
    2013-11-11

最新评论