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綁定

測試環境

系統：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.