利用Keydown事件阻止用户输入实现代码


Posted in Javascript onMarch 11, 2014

先了解下各事件的区别

KeyDown:在控件有焦点的情况下按下键时发生
KeyPress:在控件有焦点的情况下按下键时发生
KeyUp: 在控件有焦点的情况下释放键时发生

1、KeyPress主要用来接收字母、数字等ANSI字符。KeyDown 和 KeyUP 事件过程通常可以捕获键盘除了PrScrn所有按键(这里不讨论特殊键盘的特殊键

2、KeyPress 只能捕获单个字符,KeyDown 和KeyUp 可以捕获组合键。

3、KeyPress 不显示键盘的物理状态(SHIFT键),而只是传递一个字符。KeyPress 将每个字符的大、小写形式作为不同的键代码解释,即作为两种不同的字符。KeyDown 和KeyUp 不能判断键值字母的大小。KeyDown 和 KeyUp 用两种参数解释每个字符的大写形式和小写形式:keycode — 显示物理的键(将 A 和 a 作为同一个键返回)和 shift —指示 shift + key 键的状态而且返回 A 或 a 其中之一。

5、KeyPress 不区分小键盘和主键盘的数字字符,KeyDown 和KeyUp 区分小键盘和主键盘的数字字符。

6、KeyDown、KeyUp事件是当按下 ( KeyDown ) 或松开 ( KeyUp ) 一个键时发生的。由于一般按下键盘的键往往会立即放开(这和鼠标不同),所以这两个事件使用哪个差别不大。而且,up和其他两者还有一个区别:要判断key修改后的状态必须用up。

我们可以利用keydown事件来阻止用户的输入,比如某输入域只能输入数字

键盘上数字键的keyCode

[48-57] 数字键
[96-105] 数字小键盘
此外允许Backspace键删除

代码如下

var input = document.getElementById('number_ipt') 
input.onkeydown = function(e) { 
var keyCode = e.keyCode 
if ( !isNumber(keyCode) ) return false 
} // 仅能输入数字 
function isNumber(keyCode) { 
// 数字 
if (keyCode >= 48 && keyCode <= 57 ) return true 
// 小数字键盘 
if (keyCode >= 96 && keyCode <= 105) return true 
// Backspace键 
if (keyCode == 8) return true 
return false 
}
Javascript 相关文章推荐
JavaScript 以对象为索引的关联数组
May 19 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
Nov 12 Javascript
javascript 中that的含义示例介绍
May 14 Javascript
JavaScript 数组- Array的方法总结(推荐)
Jul 21 Javascript
BootStrap 超链接变按钮的实现方法
Sep 25 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
Nov 08 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
详解Angular 4.x NgTemplateOutlet
May 24 Javascript
JS实现的简单标签点击切换功能示例
Sep 21 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
webpack4.x下babel的安装、配置及使用详解
Mar 07 Javascript
基于form-data请求格式详解
Oct 29 Javascript
JavaScript中奇葩的假值示例应用
Mar 11 #Javascript
Javascript加载速度慢的解决方案
Mar 11 #Javascript
js解析json读取List中的实体对象示例
Mar 11 #Javascript
JS图片无缝、平滑滚动代码
Mar 11 #Javascript
js 针对html DOM元素操作等经验累积
Mar 11 #Javascript
表单提交前触发函数返回true表单才会提交
Mar 11 #Javascript
php析构函数的具体用法小结
Mar 11 #Javascript
You might like
PHP概述.
2006/10/09 PHP
php计算函数执行时间的方法
2015/03/20 PHP
IE与firefox之jquery用法区别
2008/10/03 Javascript
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
JavaScript易错知识点整理
2016/12/05 Javascript
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
2018/09/30 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
2019/08/07 Javascript
Servlet返回的数据js解析2种方法
2019/12/12 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
Openlayers显示瓦片网格信息的方法
2020/09/28 Javascript
Python中文件遍历的两种方法
2014/06/16 Python
Python实现从百度API获取天气的方法
2015/03/11 Python
Pycharm取消py脚本中SQL识别的方法
2018/11/29 Python
使用Flask-Cache缓存实现给Flask提速的方法详解
2019/06/11 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
opencv3/C++ 平面对象识别&amp;透视变换方式
2019/12/11 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
NBA欧洲商店(西班牙):NBA Europe Store ES
2019/04/16 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
测控技术与通信工程毕业生自荐信范文
2013/12/28 职场文书
业务总经理岗位职责
2014/02/03 职场文书
求职信的七个关键技巧
2014/02/05 职场文书
入党积极分子自我鉴定
2014/02/18 职场文书
祖国在我心中演讲稿(小学生)
2014/09/23 职场文书
资产运营委托书范本
2014/10/16 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
工商局调档介绍信
2015/10/22 职场文书
参观监狱警示教育心得体会
2016/01/15 职场文书
python 模块重载的五种方法
2021/04/24 Python
Python趣味挑战之教你用pygame画进度条
2021/05/31 Python
如何理解及使用Python闭包
2021/06/01 Python
Python学习之异常中的finally使用详解
2022/03/16 Python