键盘与文本事件
对键盘事件的支持主要遵循DOM0级;
DOM3级制定了规范但是有遗留问题,DOM2级没有键盘事件的规范;
键盘事件:keydown,keypress,keyup;
所有元素都支持以上3个事件;
文本事件:textInput;
在文本插入文本框之前会触发textInput事件;
1.keydown:当用户按下键盘上的任意键时触发,而且如果按住不放的话,会重复触发此事件;
2.keypress:
当用户按下键盘上的字符键时触发,而且如果按住不放的话,会重复触发此事件;
按下Esc键也会触发这个事件;
Safari 3.1之前的版本也会在用户按下非字符键时触发keypress事件;
3.keyup:当用户释放键盘上的键时触发;
keydown和keypress都是在文本框发生变化之前被触发的;
keyup事件则是在文本框已经发生变化之后被触发的;
键码
在发生keydown和keyup事件时,event 对象的keyCode属性中会包含一个代码,与键盘上一个特定的键对应;
对数字字母字符键,keyCode属性的值与ASCII码中对应小写字母或数字的编码相同;
DOM和IE的event对象都支持keyCode属性;
编码表page398;
字符编码
charCode/keyCode属性,只有在发生keypress事件时才包含值;
该来的总会来;
var EventUtil = {
//省略的代码
getCharCode: function (event) {
if (typeof event.charCode == "number") {
return event.charCode;
} else {
return event.keyCode;
}
},
//省略的代码
};
// 使用
var textbox = document.getElementById("myText");
EventUtil.addHandler(textbox, "keypress", function (event) {
event = EventUtil.getEvent(event);
alert(EventUtil.getCharCode(event));
});
DOM3级变化
不再包含charCode属性,换为key和char;
IE9支持key属性,不支持char属性,
Safari5和Chrome支持名为keyIdentifier的属性,
但是经过笔者测试,chrome(版本67)支持的是key,即输入的字符,
还有一个code,似乎是自定义的对每个字符的命名比如”s”是”KeyS”,”`“是”Backquote”;
DOM3级事件还添加了一个名为location的属性,这是一个数值,表示按下了什么位置上的键:
0表示默认键盘,1表示左侧位置(例如左位的Alt键),2表示右侧位置(例如右侧的Shift键),
3表示数字小键盘,4表示移动设备键盘(也就是虚拟键盘),5表示手柄(如任天堂Wii控制器);
经笔者测试,chrome(版本67)支持这个属性,但是值与上述不一致;
最后是给event对象添加了getModifierState()方法;
接收一个参数,即等于Shift,Control,AltGraph或Meta的字符串,表示要检测的修改键;
如果指定的修改键是活动的(也就是处于被按下的状态),这个方法返回true,否则返回false;
textInput事件
“DOM3级事件”规范中引入了一个新事件,名叫textInput;
根据规范,当用户在可编辑区域中输入字符时,就会触发这个事件;
这个用于替代keypress的textInput事件的行为稍有不同;
区别之一就是任何可以获得焦点的元素都可以触发keypress事件,
但只有可编辑区域才能触发textInput事件;
区别之二是textInput事件只会在用户按下能够输入实际字符的键时才会被触发,
而keypress事件则在按下那些能够影响文本显示的键时也会触发(例如退格键);
它的event对象中还包含一个data属性,这个属性的值就是用户输入的字符(而非字符编码);
另外还有一个inputMethod属性,表示把文本输入到文本框中的方式;
设备中的键盘事件
任天堂Wii遥控器的按键233;