input 输入框内的输入事件详细分析

1.基础:本次分析原理就是在各个浏览器下input内容变化的时候触发事件的各种不兼容性.在ie下用onpropertychange事件,在其他浏览器里用input事件. 
2.用例:对每个浏览器分别测试如下的情况: 
–输入英文字母时–开启输入法时–大小写不同时–输入运算符时–按下tab键时–输入法中按下空格时–按下控制键时–复制粘贴时–删除文本时–等等 
3.测试开始:(只标出特殊情况,没标出的表示正常触发,每次只触发一次事件) 
chrome: 
+开启输入法时,可以捕捉到输入事件. 
+开启输入法的时候按下空格键,触发两次事件,猜测一次是空格触发的,一次是输入法改变输入框里的文本时触发的. 
+开启输入法的时候,按下空格后,立即按下大写锁定,此后所有的输入事件都会被触发两次,原因不知. 
+没有开启输入法的时候,方向键不会触发事件,但是开启输入法后,方向键可以触发事件. 
+剪切和粘贴都会触发事件.+tab键不处罚事件,开启输入法时,按tab键触发事件. 
+按住shift和其他键(例如:数字键),每输入一个字符触发两次事件. 
Firefox: 
+开启输入法时,不能扑捉到事件,但是按下空格时,可以触发两次事件. 
+任何时候方向键都不触发事件. 
+开启输入法的时候,按下空格后,立即按下大写锁定,此后所有的输入事件都会被触发两次,原因不知. 
+按下tab键的时候不触发事件.++Firefox页面刷新的时候内容会被保留在输入框里. 
+按住shift和其他键(例如:数字键),每输入一个字符触发两次事件. 
opera: 
+正常情况下,在输入框里按下tab键会触发一次事件,但是此后只要不刷新页面,tab键都不会再触发此事件. 
+开启输入法后不会触发事件,开启后,方向键和tab键都不触发事件. 
+开启输入法时,按下空格只触发一次事件,不会出现触发两次事件的情况. 
+粘贴的时候触发事件,剪切的时候不触发 
ie: 
+输入法不会触发事件,按空格也都是只触发一次,方向键任何时刻都不触发. 
+刷新页面的时候内容会留在input里,而且注意,不管input是不是空的,刷新页面后自动触发一次事件. 
3.总结. 
就一句话,差异很大. 
注意input事件可以用在chrome,Firefox,opera里,但是只能用 addEventListener绑定,不能用ontype形式,而onpropertychange可以用on形式,也可以用attachEvent绑定 

 

 转自：http://www.jb51.net/article/22615.htm

 

 

JavaScript键盘事件测试小结

lifesinger

August 25th, 2008

 

 

测试环境

• 系统：Windows Vista Ultimate SP1
• 输入法：谷歌拼音输入法 1.2.30.71
• IE版本：ie6, ie7, ie8 beta1
• Firefox版本：2.0.0.16, 3.0.1
• Safari版本：3.1.2
• Opera版本：9.51

测试结果

	输入法未开启时	输入法开启时
Firefox	正常按下再放起A键，会依次触发keydown, keypress, input, keyup 仅按下修饰键（Ctrl/Shift/Alt）时，不会触发keypress. 注意：按下Esc, Insert, Tab, Pause, Left, Up, Enter等键时，也会触发keypress. 小结：keypress在按下非字符键时，有些会触发，有些不会触发，具体浏览器还不同。 仅在输入框的值有变化时，才会触发input. 比如Backspace键会引起值的变化，因此会触发input. 但是要注意：光标在输入值最后面时，按下Delete键不会改变输入值，但依旧会触发input. 按住某键不放时，会连续触发keydown. 当按下的是会触发keypress的键（参考上面第2条）时候，还会连续触发keypress. 同样，如果按下的是会触发input的键，也会连续触发input. Ctrl+C/V/X快捷键粘贴复制等操作时，会依次触发keydown, keydown, keypress, input, keyup, keyup. 其中input仅在值有变化时才触发（比如粘贴一张图片到文字输入框时，不会触发input）。 Ctrl+Z/Y操作时，和第5条规律一致。 通过鼠标右键进行粘贴复制等操作时，仅会触发input.	输入法中输入第一个字符时，触发keydown, keypress. 输入过程中不会触发键盘事件，输入完成时，会触发input, input, keyup. 输入法开启时，输入数字时，和输入法未开启时一致。
IE	和Firefox基本一致，就是input改成propertychange. 注意： 2. 在ie中，仅字符键会触发keypress. 这比firefox强。 3. 在ie中，Esc和Backspace功能一样，这和firefox不同。在ie中，Delete键没有改变值时，不会触发propertychange. 5. 在ie中，Ctrl+C/X/V不会触发keypress. 6. 在ie中，如果监听的事件中YAHOO.log这种页面输出的语句时，会导致Ctrl+Z/Y失效。没有输入语句时不会。（这可以认为是IE的Bug）	输入法中输入第一个字符时，触发keydown, keyup. 输入过程中也会连续触发keydown, keyup. 输入完成时，触发keydown, propertychange, keyup. （无论怎样都不会触发keypress） 输入法开启时，输入数字时，和输入法未开启时一样，但不会触发keypress.
Safari	大部分和Firefox一致。注意以下几条： 2. 和IE类似，仅字符键会触发keypress. 5. 和IE一致。	输入法中输入第一个字符时，触发keydown, input, keyup. 输入过程中会连续触发keydown, input, input, keyup. 输入完成时，触发keydown, input, input, keyup. （和IE一样，不会触发keypress） 输入法开启时，输入数字时，和IE一样，不会触发keypress.
Opera	大部分和Firefox一致。注意以下几条： 2. 所有键都会触发keypress. 4. 连续按下某键时，仅会连续触发keypress. （这个处理比其它浏览器合理） 5. 多个keypress.	和上面的浏览器都不同，仅在输入完成时触发input.