利用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 相关文章推荐
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 Javascript
js中通过split函数分割字符串成数组小例子
Sep 21 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 Javascript
js实时获取并显示当前时间的方法
Jul 31 Javascript
jQuery实现网页抖动的菜单抖动效果
Aug 07 Javascript
JS触摸与手势事件详解
May 09 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
JavaScript文本特效实例小结【3个示例】
Dec 22 Javascript
javascript验证form表单数据的案例详解
Mar 25 Javascript
通过Kettle自定义jar包供javascript使用
Jan 29 Javascript
jquery实现手风琴案例
May 04 jQuery
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
投票管理程序
2006/10/09 PHP
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
PHP中include与require使用方法区别详解
2013/10/19 PHP
PHP迭代器的内部执行过程详解
2013/11/12 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
2013/04/26 Javascript
js日期对象兼容性的处理方法
2014/01/28 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
javascript特殊日历控件分享
2016/03/07 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
Node.js查找当前目录下文件夹实例代码
2017/03/07 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
javascript 缓冲运动框架的实现
2017/09/29 Javascript
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
Bootstrap栅格系统的使用详解
2017/10/30 Javascript
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
简谈创建React Component的几种方式
2019/06/15 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
Python实现批量修改文件名实例
2015/07/08 Python
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
django celery redis使用具体实践
2019/04/08 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
New delete 与malloc free 的联系与区别
2013/02/04 面试题
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
体育专业自荐书
2014/05/29 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
公司外出活动方案
2014/08/14 职场文书
2014县政府领导班子三严三实对照检查材料思想汇报
2014/09/26 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL