input 輸入框內的輸入事件詳細分析

來源:互聯網
上載者:User

1.基礎:本次分析原理就是在各個瀏覽器下input內容變化的時候觸發事件的各種不相容性.在ie下用onpropertychange事件,在其他瀏覽器裡用input事件.
2.用例:對每個瀏覽器分別測試如下的情況:
–輸入英文字母時–開啟IME時–大小寫不同時–輸入運算子時–按下tab鍵時–IME中按下空格時–按下修飾鍵時–複製粘貼時–刪除文本時–等等
3.測試開始:(只標出特殊情況,沒標出的表示正常觸發,每次只觸發一次事件)
chrome:
+開啟IME時,可以捕捉到輸入事件.
+開啟IME的時候按下空格鍵,觸發兩次事件,猜測一次是空格觸發的,一次是IME改變輸入框裡的文本時觸發的.
+開啟IME的時候,按下空格後,立即按下大寫鎖定,此後所有的輸入事件都會被觸發兩次,原因不知.
+沒有開啟IME的時候,方向鍵不會觸發事件,但是開啟IME後,方向鍵可以觸發事件.
+剪下和粘貼都會觸發事件.+tab鍵不處罰事件,開啟IME時,按tab鍵觸發事件.
+按住shift和其他鍵(例如:數字鍵),每輸入一個字元觸發兩次事件.
Firefox:
+開啟IME時,不能撲捉到事件,但是按下空格時,可以觸發兩次事件.
+任何時候方向鍵都不觸發事件.
+開啟IME的時候,按下空格後,立即按下大寫鎖定,此後所有的輸入事件都會被觸發兩次,原因不知.
+按下tab鍵的時候不觸發事件.++Firefox頁面重新整理的時候內容會被保留在輸入框裡.
+按住shift和其他鍵(例如:數字鍵),每輸入一個字元觸發兩次事件.
opera:
+正常情況下,在輸入框裡按下tab鍵會觸發一次事件,但是此後只要不重新整理頁面,tab鍵都不會再觸發此事件.
+開啟IME後不會觸發事件,開啟後,方向鍵和tab鍵都不觸發事件.
+開啟IME時,按下空格只觸發一次事件,不會出現觸發兩次事件的情況.
+粘貼的時候觸發事件,剪下的時候不觸發
ie:
+IME不會觸發事件,按空格也都是只觸發一次,方向鍵任何時刻都不觸發.
+重新整理頁面的時候內容會留在input裡,而且注意,不管input是不是空的,重新整理頁面後自動觸發一次事件.
3.總結.
就一句話,差異很大.
注意input事件可以用在chrome,Firefox,opera裡,但是只能用 addEventListener綁定,不能用ontype形式,而onpropertychange可以用on形式,也可以用attachEvent綁定

其它線上示範說明:http://www.jb51.net/tools/keyboard_events.html

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.