输入框过滤非数字的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的public、private和privileged模式
Dec 28 Javascript
Js获取下拉框选定项的值和文本的实现代码
Feb 26 Javascript
浏览器窗口加载和大小改变事件示例
Feb 27 Javascript
node.js适合游戏后台开发吗?
Sep 03 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
干货!教大家如何选择Vue和React
Mar 13 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
Node.js+Vue脚手架环境搭建的方法步骤
Mar 08 Javascript
JQuery获得内容和属性方法解析
May 30 jQuery
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 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 编程的 5个良好习惯
2009/02/20 PHP
php中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
基于在生产环境中使用php性能测试工具xhprof的详解
2013/06/03 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
php文件上传类完整实例
2016/05/14 PHP
PHP微信公众号自动发送红包API
2016/06/01 PHP
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
js运动应用实例解析
2015/12/28 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
2018/05/15 Javascript
详解Webpack loader 之 file-loader
2018/11/07 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
[05:42]DOTA2英雄梦之声_第10期_蝙蝠骑士
2014/06/21 DOTA
[01:01]2020完美高校联赛(秋)西安落幕
2021/03/11 DOTA
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
python实现数据分析与建模
2019/07/11 Python
python中的列表与元组的使用
2019/08/08 Python
python自动发微信监控报警
2019/09/06 Python
Python实现把多维数组展开成DataFrame
2019/11/30 Python
python 实现Flask中返回图片流给前端展示
2020/01/09 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
python将unicode和str互相转化的实现
2020/05/11 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
Stuart Weitzman欧盟:美国奢华鞋履品牌
2017/05/24 全球购物
迪卡侬荷兰官网:Decathlon荷兰
2017/10/29 全球购物
贝佳斯官方网站:Borghese
2020/05/08 全球购物
小学老师寄语大全
2014/04/04 职场文书
美术课外活动总结
2014/07/08 职场文书
2014年学校国庆主题活动方案
2014/09/16 职场文书
皇城相府导游词
2015/02/06 职场文书
七夕情人节问候语
2015/11/11 职场文书
SQLServer 错误: 15404,无法获取有关 Windows NT 组/用户 WIN-8IVSNAQS8T7\Administrator 的信息
2021/06/30 SQL Server
学习nginx基础知识
2021/09/04 Servers