利用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 相关文章推荐
JS的IE和Firefox兼容性集锦
Dec 11 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
Apr 01 Javascript
Javascript设计模式之观察者模式(推荐)
Mar 29 Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 Javascript
js判断某个字符出现的次数的简单实例
Jun 03 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
原生js实现电商侧边导航效果
Jan 19 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
Jul 19 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
Oct 25 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
vue安装和使用scss及sass与scss的区别详解
Oct 15 Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 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教程之phpize使用方法
2014/02/12 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
PHP之十六个魔术方法详细介绍
2016/11/01 PHP
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
jQuery弹性滑动导航菜单实现思路及代码
2013/05/02 Javascript
jQuery formValidator表单验证
2016/01/07 Javascript
用js实现放大镜的效果的简单实例
2016/05/23 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
AngularJs每天学习之总体介绍
2017/08/07 Javascript
详解在React-Native中持久化redux数据
2019/05/22 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
python 基础教程之Map使用方法
2017/01/17 Python
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
zookeeper python接口实例详解
2018/01/18 Python
Python中的asyncio代码详解
2019/06/10 Python
pip 安装库比较慢的解决方法(国内镜像)
2019/10/06 Python
Python matplotlib以日期为x轴作图代码实例
2019/11/22 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
2014/11/11 HTML / CSS
canvas环形倒计时组件的示例代码
2018/06/14 HTML / CSS
联想马亚西亚官方网站:Lenovo Malaysia
2018/09/19 全球购物
墨西哥购物网站:Elektra
2020/01/21 全球购物
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
学校元旦晚会方案
2014/02/19 职场文书
迎元旦广播稿
2014/02/22 职场文书
环保建议书200字
2014/05/14 职场文书
质量承诺书格式
2014/05/20 职场文书
2014离婚协议书范文
2014/09/10 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书
学风建设主题班会
2015/08/17 职场文书
大学学生会主席竞选稿
2015/11/19 职场文书