日期:2014-05-16  浏览次数:20427 次

Javascript跨浏览器处理键盘事件keydown,keypress,keyup

  用户在使用键盘时会触发键盘事件。目前,对键盘事件的支持主要遵循的是DOM0级。

  在英文输入法下,所有浏览器都遵循以下三个事件:

  1. keydown: 当用户按下任意键时触发,而且按住不放的话,会重复触发此事件。
  2. keypress: 当用户按下字符键时触发,而且按住不放的话,会重复触发此事件。按下Esc键也会触发这个事件,Safari3.1之前的版本按下非字符键时也触发。
  3. keyup: 当用户释放键时触发。

  在中文输入法下,浏览器之间则表现得不一致,主要情况如下:

  1. IE,Chrome,Safari:触发keydown和keyup, 不触发keypress。
  2. Firefox:首次按下按键时触发keydown,不触发keypress。在停止输入法并改变文本框内容(如按下回车或者空格键)后会触发keyup。
  3. Opera:keydown, keypress和keyup都不触发。
  4. PS : 只有在触发keyup事件才能获得修改后的文本值。

  所有元素都支持以上三个事件,一般情况下只有在文本框时才经常用到。

  键盘事件的触发过程具体是这样的: 在用户按下键盘上的一个字符键时,首先会触发keydown事件,然后是keypress事件,最后是keyup事件。其中,keydown和keypress事件是在文本框发生变化之前被触发;而keyup在文本框发生变化之后被触发。如果用户按下一个键不放,就会重复触发keydown和keypress事件。在用户按下一个非字符键时,首先触发keydown事件,然后就是keyup事件。如果用户按下一个键不放,就会重复触发keydown。

  当我们监听这三个事件时,最想得到的数据信息就是键码(keyCode)字符编码(charCode)了。

  键码(keyCode)

  在发生keydown和keyup事件时,event对象的keyCode属性会包含一个代码,keyCode属性的值就是小写字母或数字对应的ASCII码(点击这里查看ASCII码表),在程序中可通过如下代码来获得keyCode值: