input 輸入框內(nèi)的輸入事件詳細分析
1.基礎(chǔ):本次分析原理就是在各個瀏覽器下input內(nèi)容變化的時候觸發(fā)事件的各種不兼容性.在ie下用onpropertychange事件,在其他瀏覽器里用input事件.
2.用例:對每個瀏覽器分別測試如下的情況:
–輸入英文字母時–開啟輸入法時–大小寫不同時–輸入運算符時–按下tab鍵時–輸入法中按下空格時–按下控制鍵時–復制粘貼時–刪除文本時–等等
3.測試開始:(只標出特殊情況,沒標出的表示正常觸發(fā),每次只觸發(fā)一次事件)
chrome:
+開啟輸入法時,可以捕捉到輸入事件.
+開啟輸入法的時候按下空格鍵,觸發(fā)兩次事件,猜測一次是空格觸發(fā)的,一次是輸入法改變輸入框里的文本時觸發(fā)的.
+開啟輸入法的時候,按下空格后,立即按下大寫鎖定,此后所有的輸入事件都會被觸發(fā)兩次,原因不知.
+沒有開啟輸入法的時候,方向鍵不會觸發(fā)事件,但是開啟輸入法后,方向鍵可以觸發(fā)事件.
+剪切和粘貼都會觸發(fā)事件.+tab鍵不處罰事件,開啟輸入法時,按tab鍵觸發(fā)事件.
+按住shift和其他鍵(例如:數(shù)字鍵),每輸入一個字符觸發(fā)兩次事件.
Firefox:
+開啟輸入法時,不能撲捉到事件,但是按下空格時,可以觸發(fā)兩次事件.
+任何時候方向鍵都不觸發(fā)事件.
+開啟輸入法的時候,按下空格后,立即按下大寫鎖定,此后所有的輸入事件都會被觸發(fā)兩次,原因不知.
+按下tab鍵的時候不觸發(fā)事件.++Firefox頁面刷新的時候內(nèi)容會被保留在輸入框里.
+按住shift和其他鍵(例如:數(shù)字鍵),每輸入一個字符觸發(fā)兩次事件.
opera:
+正常情況下,在輸入框里按下tab鍵會觸發(fā)一次事件,但是此后只要不刷新頁面,tab鍵都不會再觸發(fā)此事件.
+開啟輸入法后不會觸發(fā)事件,開啟后,方向鍵和tab鍵都不觸發(fā)事件.
+開啟輸入法時,按下空格只觸發(fā)一次事件,不會出現(xiàn)觸發(fā)兩次事件的情況.
+粘貼的時候觸發(fā)事件,剪切的時候不觸發(fā)
ie:
+輸入法不會觸發(fā)事件,按空格也都是只觸發(fā)一次,方向鍵任何時刻都不觸發(fā).
+刷新頁面的時候內(nèi)容會留在input里,而且注意,不管input是不是空的,刷新頁面后自動觸發(fā)一次事件.
3.總結(jié).
就一句話,差異很大.
注意input事件可以用在chrome,Firefox,opera里,但是只能用 addEventListener綁定,不能用ontype形式,而onpropertychange可以用on形式,也可以用attachEvent綁定
其它在線演示說明:http://www.dbjr.com.cn/tools/keyboard_events.html
相關(guān)文章
JavaScript檢測是否開啟了控制臺(F12調(diào)試工具)
通過js來檢測開發(fā)者工具是否打開,防止別人惡意調(diào)試我們的代碼,最近我發(fā)現(xiàn)還是有蠻多人去瀏覽那篇文章,所以這里再放出一段代碼,算是個升級版吧2020-10-10js或者jquery判斷圖片是否加載完成實現(xiàn)代碼
需要獲得圖片的寬度和高度,有些js或者jquery代碼在還沒有加載完圖片時就執(zhí)行了,這個問題該怎么解決呢?接下來分別介紹下js與jquery提供的方法2013-03-03巧用weui.topTips驗證數(shù)據(jù)的實例
下面小編就為大家?guī)硪黄捎脀eui.topTips驗證數(shù)據(jù)的實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-04-04layui 數(shù)據(jù)表格復選框?qū)崿F(xiàn)單選功能的例子
今天小編就為大家分享一篇layui 數(shù)據(jù)表格復選框?qū)崿F(xiàn)單選功能的例子,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09『JavaScript』限制Input只能輸入數(shù)字實現(xiàn)思路及代碼
一個文字方塊必須限制只能輸入數(shù)字(或是小數(shù)點)并且要支援 IE 和 Firefox,接下來為大家介紹下如何解決這個需求2013-04-04