输入框过滤非数字的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 相关文章推荐
JSON.parse 解析字符串出错的解决方法
Jul 08 Javascript
actionscript与javascript的区别
May 25 Javascript
Jquery命名冲突解决的五种方案分享
Mar 16 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
Sep 25 Javascript
JS修改iframe页面背景颜色的方法
Apr 01 Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 Javascript
jQuery实现删除li节点的方法
Dec 06 Javascript
webpack学习--webpack经典7分钟入门教程
Jun 28 Javascript
基于daterangepicker日历插件使用参数注意的问题
Aug 10 Javascript
AngularJs分页插件使用详解
Jun 30 Javascript
详谈js的变量提升以及使用方法
Oct 06 Javascript
webpack中如何加载静态文件的方法步骤
May 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
mysq GBKl乱码
2006/11/28 PHP
PHP 手机归属地查询 api
2010/02/08 PHP
php配置php-fpm启动参数及配置详解
2013/11/04 PHP
php将url地址转化为完整的a标签链接代码(php为url地址添加a标签)
2014/01/17 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
JavaScript 模块化编程(笔记)
2015/04/08 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
2019/04/29 Javascript
重学JS之显示强制类型转换详解
2019/06/30 Javascript
JS中的模糊查询功能
2019/12/08 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
Vue实现计算器计算效果
2020/08/17 Javascript
小程序实现可拖动的悬浮按钮
2020/09/07 Javascript
Golang与python线程详解及简单实例
2017/04/27 Python
使用Python制作微信跳一跳辅助
2018/01/31 Python
详解Numpy中的广播原则/机制
2018/09/20 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
2020/02/26 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
用Python制作mini翻译器的实现示例
2020/08/17 Python
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
英国最大的百货公司:Harrods
2016/08/18 全球购物
巴基斯坦购物网站:Goto
2019/03/11 全球购物
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
电话客服工作职责
2014/07/27 职场文书
医院护士工作检讨书
2014/10/26 职场文书
工作自我推荐信范文
2015/03/25 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
Nginx使用X-Accel-Redirect实现静态文件下载的统计、鉴权、防盗链、限速等
2021/04/04 Servers
python 逐步回归算法
2021/04/06 Python