输入框过滤非数字的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静态的动态
Sep 18 Javascript
HTML代码中标签的全部属性 中文注释说明
Mar 26 Javascript
jQuery操作 input type=checkbox的实现代码
Jun 14 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 Javascript
解析JavaScript模仿块级作用域
Dec 29 Javascript
vue.js实现价格格式化的方法
May 23 Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 Javascript
详解react-native-fs插件的使用以及遇到的坑
Sep 12 Javascript
性能优化篇之Webpack构建速度优化的建议
Apr 03 Javascript
详解Vue中的scoped及穿透方法
Apr 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
手把手教你使用DedeCms的采集的图文教程
2007/03/11 PHP
php入门学习知识点八 PHP中for循环基本应用之九九乘法口绝表
2011/07/14 PHP
php 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
深入PHP nl2br()格式化输出的详解
2013/06/05 PHP
深入PHP购物车模块功能分析(函数讲解,附源码)
2013/06/25 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
php实现的递归提成方案实例
2015/11/14 PHP
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
javascript克隆对象深度介绍
2012/11/20 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
python实现删除文件与目录的方法
2014/11/10 Python
使用Python下载歌词并嵌入歌曲文件中的实现代码
2015/11/13 Python
python中的错误处理
2016/04/10 Python
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
Python实现定时自动关闭的tkinter窗口方法
2019/02/16 Python
python画图的函数用法以及技巧
2019/06/28 Python
Python读取VOC中的xml目标框实例
2020/03/10 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
python使用pyecharts库画地图数据可视化的实现
2020/03/25 Python
Python之Sklearn使用入门教程
2021/02/19 Python
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
2017/08/18 HTML / CSS
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
Cocopanda波兰:购买化妆品、护肤品、护发和香水
2020/05/25 全球购物
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
2014年党员自我评议(5篇)
2014/09/12 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
Win11怎么跳过联网验机 ?Win11跳过联网验机激活教程
2022/04/05 数码科技
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android