用户在使用键盘时会触发键盘事件。目前,对键盘事件的支持主要遵循的是DOM0级。
在英文输入法下,所有浏览器都遵循以下三个事件:
- keydown: 当用户按下任意键时触发,而且按住不放的话,会重复触发此事件。
- keypress: 当用户按下字符键时触发,而且按住不放的话,会重复触发此事件。按下Esc键也会触发这个事件,Safari3.1之前的版本按下非字符键时也触发。
- keyup: 当用户释放键时触发。
在中文输入法下,浏览器之间则表现得不一致,主要情况如下:
- IE,Chrome,Safari:触发keydown和keyup, 不触发keypress。
- Firefox:首次按下按键时触发keydown,不触发keypress。在停止输入法并改变文本框内容(如按下回车或者空格键)后会触发keyup。
- Opera:keydown, keypress和keyup都不触发。
- PS : 只有在触发keyup事件才能获得修改后的文本值。
所有元素都支持以上三个事件,一般情况下只有在文本框时才经常用到。
键盘事件的触发过程具体是这样的: 在用户按下键盘上的一个字符键时,首先会触发keydown事件,然后是keypress事件,最后是keyup事件。其中,keydown和keypress事件是在文本框发生变化之前被触发;而keyup在文本框发生变化之后被触发。如果用户按下一个键不放,就会重复触发keydown和keypress事件。在用户按下一个非字符键时,首先触发keydown事件,然后就是keyup事件。如果用户按下一个键不放,就会重复触发keydown。
当我们监听这三个事件时,最想得到的数据信息就是键码(keyCode)和字符编码(charCode)了。
键码(keyCode)
在发生keydown和keyup事件时,event对象的keyCode属性会包含一个代码,keyCode属性的值就是小写字母或数字对应的ASCII码(点击这里查看ASCII码表),在程序中可通过如下代码来获得keyCode值:
//EventUtil是一个封装的对象,用来处理跨浏览器事件 var textbox = document.getElementById('myText'); EventUtil.addHandler(textbox,'keydown',function(event){ event = event || window.event; alert(event.keyCode); });
以下是keydown和keypress事件存在的一些特殊情况:
- 在FF和Opera中,按分号键时keyCode值为59,但IE,Chrome和Safari则返回186
- 在Safari3之前的版本中,上、下、左、右箭头和上翻(PageUp)、下翻(PageDown)键返回大于63000的值。
字符编码(charCode)
在发生keypress事件时,FF、Chrome和Safari的event对象都支持一个charCode属性,charCode属性的值就是按下的字符键对应的ASCII编码,这个属性在按下非字符键或发生keydown和keyup事件时值为0;IE和Opera则是在keyCode中保存字符键的ASCII编码。所以,要想跨浏览器获得字符编码,代码如下:
//获取字符编码 var getCharCode = function(event){ var charcode = event.charCode; if(typeof charcode == "number" && charcode != 0){ return charcode; }else{ //在中文输入法下 keyCode == 229 || keyCode == 197(Opera) return event.keyCode; } };
这个方法首先检查charCode属性是否包含数值(在不支持这个属性的浏览器中,值为undefined),在判断是否等于0(兼容keydown和keyup事件),如果条件成立,则返回改值,否则返回keyCode的值。之前的例子获取字符编码如下:
var textbox = document.getElementById('myText'); EventUtil.addHandler(textbox,'keydown',function(event){ event = event || window.event; alert(getCharCode(event)); });
在得到了字符编码后,可以使用String.fromCharCode()将其转换为实际的字符。
键盘事件的应用
1、 过滤输入——屏蔽某些字符的输入
达到的效果:只能输入数字,输入其他字符没有反应。不屏蔽辅助输入的按键,如退格键,方向键,复制,粘贴等。
原理很简单:在文本框修改前,获取字符编码,判断合理性,不成立则阻止键盘的默认事件。看起来很简单,但由于浏览器的兼容问题,实现起来还是有点难度。代码如下:
var handler= function(e){ e = e || window.event; var charcode = typeof e.charCode == 'number' ? e.charCode : e.keyCode; var re = /\d/; //FF和safari3.1以前版本会对方向键、退格键、删除键触发keypress事件 charcode > 9 可修复此Bug //!e.ctrlKey 不屏蔽Ctrl+C,Ctrl+V if(!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey){ //阻止默认事件 if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue = false; } } }; EventUtil.addHandler(textbox,'keypress',handler); //监听粘贴事件 EventUtil.addHandler(textbox,'paste',function(e){ e = e || window.event; var clipboardData = e.clipboardData || window.clipboardData; if(!/^\d*$/.test(clipboardData.getData('text'))){ //阻止默认事件 if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue = false; } } });
在这个例子的基础上加以修改和调整,就可以应用于放过或屏蔽任何输入文本框的字符。
很遗憾,还有一个bug未能解决,就是在中文输入法时keypress事件失效问题。
针对中文输入法的Bug,目前找到的解决办法是:在文本框加入属性style="ime-mode:disabled" IE和FF下可禁用输入法;在Chrome,Safar下可为文本框添加keydown事件,判断event.keyCode是否等于299,是的话就阻止keydown默认事件,这种方法对IE也有效。而对于Opera则没有找到解决办法。
路漫漫其修远兮,吾将上下求索!
相关推荐
1、KeyPress主要用来接收字母、数字等ANSI字符 KeyDown 和 KeyUP 事件过程通常可以捕获键盘除了PrScrn所有按键(这里不讨论特殊键盘的特殊键 2、KeyPress 只能捕获单个字符 KeyDown 和KeyUp 可以捕获组合键。...
本文实例为大家分享了JavaScript键盘事件响应顺序的具体实现代码,供大家参考,具体内容如下 键盘响应顺序 当按下键盘时,会触发多个事件,它们将按顺序发生。 对于字符键来说,键盘事件的影响顺序如下: 1.keydown...
React键盘事件处理程序一个用于处理键盘事件(keyup,keydown和keypress * )的React组件。主要特点支持组合键(例如CTRL + S甚至CTRL + SHIFT + S); 仅支持处理修改键(例如,按“ ctrl”键的处理); 支持几乎...
本文实例讲述了JavaScript键盘事件常见用法。分享给大家供大家参考,具体如下: JavaScript 键盘事件有以下3种 keydown 键盘按键按下(如果按着不放,会持续触发该事件),可以捕获组合键。 keypress 键盘非功能按键...
事件类型keydown, keypress 与 keyup 可以确定是哪种事件在活动。 KeyboardEvent 表示刚刚发生在按键上的事情。 当你需要处理文本输入的时候,使用 HTML5 input 事件代替。例如,用户使用手持系统如平板电脑输入时...
jQuery对JavaScript操作DOM事件进行了封装,形成了更好的事件处理机制; 包括常用事件、事件绑定与解绑等。jQuery事件处理方法是jQuery的核心函数。 常用事件方法(教材P263表A-4): 分类 事件方法 描述 鼠标 click...
它支持特定按键,键盘组合或按键序列上的keypress , keydown和keyup事件。 货叉通知 这个项目是从分叉的。 之所以分叉是因为没有对请求请求进行审查。 该fork的作者打算审查pull-requests。 主要变化是 重构为...
keydown,keyup,keypress 按下键,键离开,按下键的时候触发,注意keypress只对数字字母键有效 load 加载图片或者页面的时候 mousedown,mouseup 按下键,放开键 mouseover,mouseout over是当鼠标进入的时候出发,...
Javascript中有3个事件句柄在对应键盘的输入状态:keydown、keypress和keyup。 分别对应的意思是:按键被按下(按下按键但还没有抬起)、点击按键(按下并抬起按键)、按键抬起(按键抬起之后) 按键的分类 按键可以...
之前做了一个Javascript控制时间格式的输入,主要用到了keydown和keyup两个事件,但感觉写的很复杂而且还有bug。 今日了解了一下keypress事件与keydown和keyup的区别。大致如下(目前只了解这么多): keydown:按键...
keydown,keyup,keypress:属于你的键盘按键 mousedown,mouseup:属于你的鼠标按键 当按钮被按下时,发生 keydown 事件, keyup是在用户将按键抬起的时候才会触发的, 完整的 key press 过程分为两个部分:1. 按键被按...
它支持特定按键,键盘组合或按键序列上的keypress , keydown和keyup事件。 入门 在结束</body>标记之前在页面上添加捕鼠器 < script src =" /path/to/mousetrap.min.js " > </ script > 或从npm...
对于 keydown 和 keyup 事件,它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。 因此我们可以根据keycode返回的字符码来判断用户所按下的键,下面就是一个用于测试上下左右按键的js代码,...
在 nodejs 上模拟 keyup 和 keydown。 样本 var keydownup = require ( "./index" ) keydownup ( process . stdin ) process . stdin . on ( 'keydown' , function ( ) { console . log ( "keydown" ) } ) ...
这两个事件可以增加图标按钮的图像效果, 至于mouseDown和mouseUp的属性,它们是伴随着Click事件发生的,这和keyPress事件是keyDown事件和keyUp事件组合而成的机制是一样的 ,这3个鼠标事件也有modifier属性。...
键盘单机 keypress() keydown() keyup () 表单单机 submit() change() focus blur() 文档窗口事件 scroll() resize () 语法的重点。(鼠标的移入,移出,单机,显示,隐藏)五个动作的实现内容。下面是语法的重点...
但是,在事件处理中调用location属性、close()方法或open()方法时必须使用实例名称。 6-2-1 window对象的方法 window对象有以下方法: open close alert confirm prompt setTimeout clearTimeout ...
第一个问题是对于按键事件来说根本就... 另外,在keypress与keydown和keyup之间还有一些很重要的区别。 最后就是windows和mac的区别了,在mac上要检测用户按下了什么键简直比在windows下难了N倍。 keyCode和charCode
#About jQuery Hotkeys是一个插件,可让您轻松地在代码中的任意位置添加和删除键盘事件处理程序,从而支持几乎任何按键组合。 该插件基于Tzury Bar Yochay的插件: 语法如下: $(expression).bind(types.keys, ...