键盘与文本事件
《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