输入框过滤非数字的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 相关文章推荐
javascript常见用法总结
May 22 Javascript
JavaScript中的类与实例实现方法
Jan 23 Javascript
JavaScript中的Promise使用详解
Jun 24 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
JavaScript实现经纬度转换成地址功能
Mar 28 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
微信小程序分包加载代码实现方法详解
Sep 23 Javascript
微信小程序wx.request的简单封装
Nov 13 Javascript
详解Nuxt.js 实战集锦
Nov 19 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
Jan 08 Javascript
React冒泡和阻止冒泡的应用详解
Aug 18 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数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
PHP实现根据银行卡号判断银行
2015/04/29 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
不懂JavaScript应该怎样学
2008/04/16 Javascript
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
解决JS中乘法的浮点错误的方法
2014/01/03 Javascript
jquery JSON的解析方式示例介绍
2014/07/27 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
vue template中slot-scope/scope的使用方法
2018/09/06 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
swiperjs实现导航与tab页的联动
2020/12/13 Javascript
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
python绘图库Matplotlib的安装
2014/07/03 Python
python的dict,set,list,tuple应用详解
2014/07/24 Python
Python中的高级函数map/reduce使用实例
2015/04/13 Python
python实现向ppt文件里插入新幻灯片页面的方法
2015/04/28 Python
遗传算法python版
2018/03/19 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
美国专业消费电子及摄影器材网站:B&H Photo Video
2019/12/18 全球购物
String是最基本的数据类型吗?
2013/06/13 面试题
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
日语专业推荐信
2013/11/12 职场文书
三年大学生活自我鉴定
2014/01/21 职场文书
教师读书活动总结
2014/05/07 职场文书
2015年城管执法工作总结
2015/07/23 职场文书
环保建议书作文300字
2015/09/14 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs