输入框过滤非数字的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的IE和Firefox兼容性汇编
Jul 01 Javascript
跨浏览器的事件对象介绍
Jun 27 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
Jan 13 Javascript
jquery实现上下左右滑动的方法
Feb 09 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 Javascript
jQuery无刷新切换主题皮肤实例讲解
Oct 21 Javascript
js实现页面a向页面b传参的方法
May 29 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
Centos6.8下Node.js安装教程
May 12 Javascript
vue实现axios图片上传功能
Aug 20 Javascript
ES6箭头函数和扩展实例分析
May 23 Javascript
js实现鼠标滑动到某个div禁止滚动
Sep 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技巧与注意事项分析
2011/02/03 PHP
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
jscript之List Excel Color Values
2007/06/13 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
2013/07/10 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
简述vue状态管理模式之vuex
2018/08/29 Javascript
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
JavaScript迭代器的含义及用法
2019/06/21 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
2019/08/20 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
Vue3 源码导读(推荐)
2019/10/14 Javascript
简单谈谈Python流程控制语句
2016/12/04 Python
Python闭包函数定义与用法分析
2018/07/20 Python
python scrapy爬虫代码及填坑
2019/08/12 Python
Python input函数使用实例解析
2019/11/22 Python
python第三方库学习笔记
2020/02/07 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
python切割图片的示例
2020/11/12 Python
html5自动播放mov格式视频的实例代码
2020/01/14 HTML / CSS
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
成功的餐厅经营创业计划书
2014/01/15 职场文书
幼儿园秋游感想
2014/03/12 职场文书
课前一分钟演讲稿
2014/08/26 职场文书
2016年小学生迎国庆广播稿
2015/12/18 职场文书
《莫泊桑拜师》教学反思
2016/02/22 职场文书
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python