输入框过滤非数字的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获取元素样式属性值的方法
Dec 25 Javascript
在JavaScript中实现类的方式探讨
Aug 28 Javascript
js post提交调用方法
Feb 12 Javascript
jQuery中Ajax的load方法详解
Jan 14 Javascript
js,jq,css多方面实现简易下拉菜单功能
May 13 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
Sep 28 Javascript
AngularJS实现表单元素值绑定操作示例
Oct 11 Javascript
在angularJs中进行数据遍历的2种方法
Oct 08 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
Nov 18 Javascript
详解React项目中碰到的IE问题
Mar 14 Javascript
安装多版本Vue-CLI的实现方法
Mar 24 Javascript
antd design table更改某行数据的样式操作
Oct 31 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中文分词系统SCWS安装和使用实例
2014/04/11 PHP
php中文验证码实现方法
2015/06/18 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
json简单介绍
2008/06/10 Javascript
jquery 学习之二 属性(类)
2010/11/25 Javascript
jquery获得页面元素的坐标值实现思路及代码
2013/04/15 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
2013/12/11 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
获取input标签的所有属性的方法
2016/06/28 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
Javascript中this关键字指向问题的测试与详解
2017/08/11 Javascript
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
2019/02/13 Javascript
JavaScript的一些小技巧分享
2021/01/06 Javascript
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
Python读csv文件去掉一列后再写入新的文件实例
2017/12/28 Python
python实现冒泡排序算法的两种方法
2018/03/10 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
python与idea的集成的实现
2020/11/20 Python
中软国际Java程序员机试题
2012/08/19 面试题
农村门前三包责任书
2014/07/25 职场文书
村干部群众路线整改措施思想汇报
2014/10/12 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android