键盘事件如下:
- keydown:当用户按下键盘上的任意键时触发,而且如果按住不放的话,会重复触发此事件。
- keypress:当用户按下键盘上的字符键时触发,而且如果按住不放的话,会重复触发此事件。
- keyup:当用户释放键盘上的键时触发。
只有一个文本事件:textInput。textInput是对keypress的补充,用意是在将文本显示给用户之前更容易拦截文本。在文本插入文本框之前会触发textInput事件。
解释:
当用户按下一个键盘上的字符键时,首先会触发keydown事件,然后紧跟着是keypress事件,最后会触发keyup事件。
keydown和kepress都是在文本框发生变化之前触发的,keyup事件则是在文本框已经发生变化之后触发的。
如果用户按下一个字符键不放,就会重复触发keydown和keypress事件,直到用户松开该键为止。
如果用户按下的是一个非字符键,那么首先会触发keydown事件,然后就是keyup事件。如果按住这个非字符键不放,那么就会一直重复触发keydown事件,直到用户松开这个键,此时会触发keyup事件。
1、键码
keydown和keyup事件发生时,evnet对象的keyCode属性中会包含一个代码,与键盘上一个特定的键对应。
var textbox=document.getElementById("myText");
EventUtil.addHandler(textbox,"keyup",function(event){
event=EventUtil.getEvent(event);
console.log(event.keyCode);
});
兼容性:在Firefox和Opera中,按分号键时keyCode值为59,也就是ASCII中分号的编码;但IE和Safari返回186,即键盘中按键的键码。
2、字符编码
IE9,Firefox,Chrome和Safari的event对象支持charCode 属性,charCode只有发生keypress事件时才包含值,该值是按下那个键所代表字符的ASCII编码。
兼容性:
IE8及之前版本中Opera是在keyCode中保存字符的ASCII编码。
检查charCode属性是否可用,不可用则使用keyCode。
getCharCode:function(event){
if(typeof event.charCode=="number"){//在不支持的浏览器中值是undefined
return event.charCode;
}else{
return event.keyCode;
}
}
在取得了字符编码之后,就可以使用String.fromCharCode()将其转换成实际的字符。
3、DOM3级变化
DOM3中键盘事件不再包含charCode,而是包含2个新属性:key和char。
key是为了取代keyCode新增的,它的值是一个字符串。按下字符键(比如"M"),key的值就是相应的文本字符"M";按下非字符键时,key的值就是相应的键名(比如"Shift"或“Down”)。
char属性在按下字符键时行为与key相同,但在按下非字符键时值为null。
存在兼容性,不推荐用。
4、textInput事件(DOM3事件)
用户在可编辑区域中输入字符时,就会触发这个事件。
textInput用来代替keypress,二者区别:
- 任何可以获得焦点的元素都可以触发keypress事件,但只有可编辑区域才能触发textInput事件。
- textInput事件只会在用户按下能够输入实际字符的键时才会触发,而keypress事件则在按下那些能够影响文本显示的键时也会触发(比如退格键)。
data属性
textInput事件主要考虑的是字符,因此它的event对象中还包含一个data属性,data值为用户输入的字符。
- 用户按下S键,data值就是“s”
- 用户按下上档键时按下S键,data值就是"S"
EventUtil.addHandler(textbox,"textInput",function(event){
event=EventUtil.getEvent(event);
console.log(event.data);
});
inputMethod属性
另外,event对象上还有一个属性,叫inputMethod,表示文本输入到文本框中的方式。使用这个属性可以确定文本是如何输入到控件中,从而验证其有效性。
- 0,表示浏览器不确定是怎么输入的
- 1,表示是使用键盘输入的
- 2,表示文本是粘贴进来的
- 3,表示文本是拖放进来的
- 4,表示文本是使用IME输入的
- 5,表示文本是通过在表单中选择某一项输入的
- 6,表示文本是通过手写输入的(比如使用手写笔)
- 7,表示文本是通过语音输入的
- 8,表示文本是通过集中方法组合输入的
- 9,表示文本是通过脚本输入的
兼容性:支持textInput属性的浏览器有IE9+,Safari和Chrome,只有IE支持inputMethod属性。
扩展阅读:
javaScript事件(四)event的公共成员(属性和方法)
本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/6558581.html有问题欢迎与我讨论,共同进步。