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


Posted in Javascript onSeptember 18, 2014

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代码

Javascript 相关文章推荐
AJAX的跨域与JSONP(为文章自动添加短址的功能)
Jan 17 Javascript
使用js+jquery实现无限极联动
May 23 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 Javascript
浅谈Cookie的生命周期问题
Aug 02 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
Nov 23 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
ReactJs实现树形结构的数据显示的组件的示例
Aug 18 Javascript
webpack搭建vue 项目的步骤
Dec 27 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
Feb 09 Javascript
vue使用自定义icon图标的方法
May 14 Javascript
基于Node的Axure文件在线预览的实现代码
Aug 28 Javascript
小程序登录之支付宝授权的实现示例
Dec 13 Javascript
小结Node.js中非阻塞IO和事件循环
Sep 18 #Javascript
JavaScript将取代AppleScript?
Sep 18 #Javascript
Javascript MVC框架Backbone.js详解
Sep 18 #Javascript
JS回调函数的应用简单实例
Sep 17 #Javascript
js实现在同一窗口浏览图片
Sep 17 #Javascript
js实现获取焦点后光标在字符串后
Sep 17 #Javascript
在JavaScript中构建ArrayList示例代码
Sep 17 #Javascript
You might like
php 删除一个数组中的某个值.兼容多维数组!
2012/02/18 PHP
微信支付开发动态链接Native支付
2016/07/12 PHP
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
2017/03/15 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
node.js中的fs.readFileSync方法使用说明
2014/12/15 Javascript
JS获取Table中td值的方法
2015/03/19 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
JS中创建函数的三种方式及区别
2016/03/13 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
javascript 中select框触发事件过程的分析
2017/08/01 Javascript
基于jquery实现五星好评
2017/11/18 jQuery
微信小程序实现tab和swiper切换结合效果
2020/07/17 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
Python跳出循环语句continue与break的区别
2014/08/25 Python
在Python中用split()方法分割字符串的使用介绍
2015/05/20 Python
Python匹配中文的正则表达式
2016/05/11 Python
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
Python中无限循环需要什么条件
2020/05/27 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
手术室护士长竞聘书
2014/03/31 职场文书
室内设计专业自荐信
2014/05/31 职场文书
学校运动会报道稿
2014/09/23 职场文书
设备收款委托书范本
2014/10/02 职场文书
特种设备安全管理制度
2015/08/06 职场文书