输入框过滤非数字的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 异步调用框架 (Part 5 - 链式实现)
Aug 04 Javascript
Javascript 圆角div的实现代码
Oct 15 Javascript
IE和Firefox下event事件杂谈
Dec 18 Javascript
javascript:void(0)的作用示例介绍
Oct 28 Javascript
javascript与cookie 的问题详解
Nov 11 Javascript
jquery利用命名空间移除绑定事件的方法
Mar 11 Javascript
全面了解addEventListener和on的区别
Jul 14 Javascript
js for循环倒序输出数组元素的实例
Mar 01 Javascript
详解原生js实现offset方法
Jun 15 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
Sep 18 Javascript
JS高阶函数原理与用法实例分析
Jan 15 Javascript
JS实现横向轮播图(初级版)
Jun 24 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 删除cookie和浏览器重定向
2009/03/16 PHP
PHP下常用正则表达式整理
2010/10/26 PHP
PHP中include与require使用方法区别详解
2013/10/19 PHP
PHP数组内存利用率低和弱类型详细解读
2017/08/10 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
枚举JavaScript对象的函数
2006/12/22 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
jquery实现简单实用的弹出层效果代码
2015/10/15 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
基于Node.js实现nodemailer邮件发送
2016/01/26 Javascript
辨析JavaScript中的Undefined类型与null类型
2016/05/26 Javascript
简单封装js的dom查询实例代码
2016/07/08 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
2017/10/31 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
vue axios 简单封装以及思考
2018/10/09 Javascript
Vue slot用法(小结)
2018/10/22 Javascript
优雅的处理vue项目异常实战记录
2019/06/05 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
vue中渲染对象中属性时显示未定义的解决
2020/07/31 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
Pycharm中import torch报错的快速解决方法
2020/03/05 Python
python实现简单俄罗斯方块
2020/03/13 Python
python中pow函数用法及功能说明
2020/12/04 Python
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
自我评价的写作规则
2014/01/06 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
2014年基层党建工作总结
2014/11/11 职场文书
个人党性锻炼总结
2015/03/05 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
解约证明模板
2015/06/19 职场文书