输入框过滤非数字的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 相关文章推荐
Js 本页面传值实现代码
May 17 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
Jul 04 Javascript
jQuery中[attribute]选择器用法实例
Dec 31 Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 Javascript
谈谈Jquery中的children find 的区别有哪些
Oct 19 Javascript
Javascript中的Prototype到底是什么
Feb 16 Javascript
Angularjs过滤器使用详解
May 25 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
Jun 17 Javascript
利用JS实现scroll自定义滚动效果详解
Oct 17 Javascript
p5.js入门教程之键盘交互
Mar 19 Javascript
详解Webpack loader 之 file-loader
Nov 07 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 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
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
PHP中strtotime函数使用方法详解
2011/11/27 PHP
Symfony2开发之控制器用法实例分析
2016/02/05 PHP
Yii2 批量插入、更新数据实例
2017/03/15 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
一些常用的JS功能函数(2009-06-04更新)
2009/06/04 Javascript
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
js获得页面的高度和宽度的方法
2014/02/23 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
vue使用drag与drop实现拖拽的示例代码
2017/09/07 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
Vue头像处理方案小结
2018/07/26 Javascript
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
亲自动手实现vue日历控件
2019/06/26 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
python局部赋值的规则
2013/03/07 Python
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
教你使用python实现微信每天给女朋友说晚安
2018/03/23 Python
对Pyhon实现静态变量全局变量的方法详解
2019/01/11 Python
python 多线程重启方法
2019/02/18 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
pygame实现非图片按钮效果
2019/10/29 Python
python如何爬取网页中的文字
2020/07/28 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
HTML5中的postMessage API基本使用教程
2016/05/20 HTML / CSS
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
应届生新闻编辑求职信
2013/11/19 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技