输入框过滤非数字的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 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
Cookie 小记
Apr 01 Javascript
jquery 模板的应用示例
Nov 12 Javascript
基于Jquery实现焦点图淡出淡入效果
Nov 30 Javascript
JS传值出现中文参数乱码的解决方法
Jun 30 Javascript
JS原型链 详解及示例代码
Sep 06 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
JS求解三元一次方程组值的方法
Jan 03 Javascript
js中el表达式的使用和非空判断方法
Mar 28 Javascript
基于webpack4搭建的react项目框架的方法
Jun 30 Javascript
基于vue-upload-component封装一个图片上传组件的示例
Oct 16 Javascript
JS多个表单数据提交下的serialize()应用实例分析
Aug 27 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的正则处理函数总结分析
2008/06/20 PHP
PHP中Notice错误常见解决方法
2017/04/28 PHP
PHP 中魔术常量的实例详解
2017/10/26 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
innerHTML与jquery里的html()区别介绍
2012/10/12 Javascript
jquery ajax 局部刷新小案例
2014/02/08 Javascript
JQuery动态添加和删除表格行的方法
2015/03/09 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
基于JS实现的倒计时程序实例
2015/07/24 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
浅谈js中的变量名和函数名重名
2017/02/13 Javascript
JS+CSS实现下拉刷新/上拉加载插件
2017/03/31 Javascript
vue-router实现webApp切换页面动画效果代码
2017/05/25 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
搭建vue开发环境
2018/07/19 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
JS实现小米轮播图
2020/09/21 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
Python运行DLL文件的方法
2020/01/17 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
商务日语毕业生自荐信范文
2013/11/14 职场文书
艺术设计专业个人求职信
2014/04/10 职场文书
节约用水倡议书
2014/04/16 职场文书
2014年稽查工作总结
2014/12/20 职场文书
学前班幼儿评语大全
2014/12/29 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
美丽心灵观后感
2015/06/01 职场文书
初中家长意见
2015/06/03 职场文书
Java设计模式之享元模式示例详解
2022/03/03 Java/Android
volatile保证可见性及重排序方法
2022/08/05 Java/Android