键盘与文本事件

《javascript高级程序设计》 13.4.4  ---键盘与文本事件  笔记

一、键盘事件

  1. 有3个键盘事件

     keydown  当用户按下键盘上的任意键时触发,而且如果按住不放的话。会重复触发此事件

     keypress   当用户按下键盘上的字符键时触发,而且如果按住不入的话,会重复触发此事件、按下Esc键也会触发这个事件。Safari3.1之前的版本也会在用户按下非字符键时触发些事件

    keyup  当用户释放键盘的时触发

  2. 有一个文本事件

    textInput  是对keypress的补充,用意是将文本显示给用户之前更容易拦截文本,在文本插入文本框之前就能触发textInput事件

  3. 在用户按下键盘上的字符键时,会依次触发 keydown ---> keypress ---> keyup ;   keydown,keypress都是在文本框发生变化之前触发的,keyup是在文本框变化之后触发的,当用户按住一个键不放时,会重复触发keydown与keypress事件

    在键盘上按下一个非字符键时,会依次触发keydown --->  keyup 如果按住非字符键不放,会重复触发keydown事件

4. 键盘事件支持修改键 shiftKey,ctrlKey,altKey,metaKey(IE不支持)

 

二、键盘事件其他信息

  1.  键码  在发生keydown,keyup事件时,event对象的keyCode属性会包含一个代码。与sfhift键的状态无关

      keypress事件对象中没有keyCode属性

  2. 字符编码  发生keypress事件,DOM3级事件规范,event对象中有一个charCode属性。这个属性只有在发生keypress事件时才包含值,而且这个值是按下的那个键所代表字符的ASCII编码

  3.  DOM3级变化

     DOM3级键盘事件不再包含charCode属性,而是包含两个key与char属性

     key  是为了取代keyCode,返回的是一个字符串,在按下某个字符键时,key的值就是相应的文本字符,在按下非字符键时,就是相应键的名。

    char  行为与key相同,但按下非字符键时的值为null

   IE9+支持key属性,但不支持char属性, safari5+ 与chrome支持名为keyIdentifier的属性,在按下非字符键的情况下与key的值相同,对于字符键,keyIdentifier返回一个格式类似U+0000的字符串,表示Unicode值

  location属性,是一个数值,表示按下了什么位置上的键

      0 ---- 默认键盘   1 ---  左侧位置(左位的Alt键)   2 ---- 右侧位置(右侧的Shift键)   3 ---- 数字小键盘

      4 ---- 移动设备键盘(虚拟键盘)  5 ---- 手柄(如任天堂Wii控制器)

      IE9支持这个属性 safari与chrome支持名为keyLocation的等价属性。但即有Bug  值始终是0  除非按下了数字键盘(此时,值为3) ,否则,不会是1、2、4、5  (chrome30,ff 支持 DOM的location,opera16,safari5.17不支持)

   getModifierState()方法,接受一个参数,即Shift,Control,AltGraph,Meta的字符串,表示要检测的修改键,如果处于被按下的状态,会返回true,否则为false(IE9+,chrome30,FF24支持,safari5.1.7,opera16不支持)

 

三、文本事件

  textInput事件,当用户在可编辑区域中输入字符时,就会触发这个事件,与keypress的区别在于

   1.  textInput只能在可编辑区域才能触发,keypress可以在任意可得到焦点的元素上触发

   2.  textInput只会在用户按下能够输入实际字符的键时才会触发,keypress在按下那些能够影响文本显示的键时也会触发(例如退格键)

textInput事件的event对象有一个data属性,这个属性的值就是用户输入的字符(不是字符编码),与大小写有关

textInput事件的event对象有一个inputMethod属性,表示把文本输入到文本框中的方式

   0 ---- 浏览器不确定是怎么输入的      1 ------ 使用键盘输入的                  2 ---- 文本是粘贴进来的

   3 ---- 文本是拖放进来的        4 ------ 文本是使用IME输入的         5 ---- 文本是通过在表单中选择某一项输入的

    6 ---- 文本是通过手写输入的   7 ----- 文本是通过语言输入的          8 ----  文本是通过几种方法组合输入的

   9 ------ 文本是通过脚本输入的

  只有IE支持inputMethod

posted @ 2013-10-07 16:20  独角xi  阅读(393)  评论(0编辑  收藏  举报