利用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,水平有待提高
Jan 31 Javascript
用innerhtml提高页面打开速度的方法
Aug 02 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
May 12 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
Mar 01 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
May 03 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
Jun 01 Javascript
vue登录路由验证的实现
Dec 13 Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 Javascript
ElementUI之Message功能拓展详解
Oct 18 Javascript
JS实现电商商品展示放大镜特效
Jan 07 Javascript
解决vue-loader加载不上的问题
Oct 21 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下把数组保存为文件格式的实例应用
2010/02/08 PHP
PHP的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
Codeigniter购物车类不能添加中文的解决方法
2014/11/29 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
PHP常用处理静态操作类
2015/04/03 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
js confirm()方法的使用方法实例
2013/07/13 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
js使用递归解析xml
2014/12/12 Javascript
jQuery中width()方法用法实例
2014/12/24 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
Vue实现双向绑定的方法
2016/12/22 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
js实现4个方向滚动的球
2017/03/06 Javascript
jQuery+ajax实现局部刷新的两种方法
2017/06/08 jQuery
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python函数的5种参数详解
2017/02/24 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
Python eval函数介绍及用法
2020/11/09 Python
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
经贸日语专业个人求职信
2013/12/13 职场文书
医院办公室主任职责
2013/12/29 职场文书
光荣入党自我鉴定
2014/01/22 职场文书
总账会计岗位职责
2014/03/13 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
Mysql binlog日志文件过大的解决
2021/10/05 MySQL
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL