JavaScript 事件——“事件类型”中“键盘与文本事件”的注意要点

  • A+
所属分类:JavaScript

“DOM3级事件”为键盘事件制订了规范:

键盘事件:

  • keydown:按下任意键触发,如果按住不放,会重复触发;
  • keypress:按下字符键触发,如果按住不放,会重复触发;按下Esc键也会触发;
  • keyup:释放键盘上的键时触发;

文本事件:

  • textInput:在文本插入文本框之前会触发textInput事件。

程序:

当用户按下一个键盘上的字符键:keydown --> keypress --> keyup;

当用户按下一个键盘上的非字符键:keydown --> keyup;

键盘事件

键码event.keyCode属性

发声keydown和keyup事件,event对象的keyCode属性包含一个代码,与键盘上一个特定的键对应。对数字字母字符键,keyCode属性的值与ASCⅡ码中对应小写字母或数字的编码相同。

键码如下:

但部分键码在不同浏览器有不同的值;

字符编码charCode属性

这个属性只有在发声keypress事件才包含值,而且这个值是按下的那个键所代表字符的ASCⅡ编码;此时的keyCode通常等于0或者也可能等于所按键的键码。

上面的例子显示,当onkeydown时,charCode为0,keyCode为65;当onkeypress时,charCode与keyCode值相同为97

IE8及之前的版本和Opera是在keyCode中保存字符的ASCⅡ编码,通用版如下:

获得了ASCⅡ编码后,可以通过String.fromCharCode()将其转换成实际的字符。

DOM3级变化

key、char、keyIdentifier属性

DOM3级事件中的键盘事件,不再包含charCode属性,而是包含两个新属性:key和char;

  • key属性:返回相应的文本字符(字符键返回字符,非字符键返回“shift”等);
  • char属性:返回相应的文本字符(字符键返回字符,非字符键返回null);

兼容性:

  • IE9支持key属性但不支持char属性;
  • Safari 5和Chrome支持名为keyIdentifier的属性,非字符键返回“shift”等,字符键返回格式类似“U+0000”的字符串,表示Unicode值。

如下:

location和keyLocation属性

location属性表示按下了什么位置上的键:

  • 0表示默认键盘;
  • 1表示左侧位置(左边的Alt键等);
  • 2表示右侧位置;
  • 3表示数字小键盘;
  • 4表示移动设备键盘(虚拟键盘);
  • 5表示手柄(Wii控制器等);

IE9支持这个属性;Safari和Chrome支持名为keyLocation属性(目前貌似支持location属性了);

getModifierState()方法

接收一个参数(修改键),当指定的修改键是活动的,这个方法返回true,否则返回false;参数有(“Shift”、“Alt”、“Control”、“Meta”);

然而事实上用event.shiftKey等属性即可。

textInput事件

textInput事件

当用户在可编辑区域中输入字符时,就会触发。与keypress不同,首先只要能获得焦点的元素都可以触发keypress,但只有可编辑区域才能出发textInput。另一个区别是textInput事件只会在用户按下能够输入实际字符的键时才会被触发,keypress则在按下能够影响文本显示的键时也会触发(例如退格键)。

另外event中data属性返回用户输入的字符:

注意,只能用addEventListener函数。

inputMethod属性

dvent对象上的属性,表示把文本输入到文本框中的方式:

  • 0:不确定如何输入的;
  • 1:键盘;
  • 2:粘贴;
  • 3:拖放;
  • 4:IME;
  • 5:表单中选择某一项输入;
  • 6:手写;
  • 7:语音;
  • 8:组合输入;
  • 9:脚本输入;
weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: