input 輸入框內(nèi)的輸入事件詳細(xì)分析
1.基礎(chǔ):本次分析原理就是在各個(gè)瀏覽器下input內(nèi)容變化的時(shí)候觸發(fā)事件的各種不兼容性.在ie下用onpropertychange事件,在其他瀏覽器里用input事件.
2.用例:對每個(gè)瀏覽器分別測試如下的情況:
–輸入英文字母時(shí)–開啟輸入法時(shí)–大小寫不同時(shí)–輸入運(yùn)算符時(shí)–按下tab鍵時(shí)–輸入法中按下空格時(shí)–按下控制鍵時(shí)–復(fù)制粘貼時(shí)–刪除文本時(shí)–等等
3.測試開始:(只標(biāo)出特殊情況,沒標(biāo)出的表示正常觸發(fā),每次只觸發(fā)一次事件)
chrome:
+開啟輸入法時(shí),可以捕捉到輸入事件.
+開啟輸入法的時(shí)候按下空格鍵,觸發(fā)兩次事件,猜測一次是空格觸發(fā)的,一次是輸入法改變輸入框里的文本時(shí)觸發(fā)的.
+開啟輸入法的時(shí)候,按下空格后,立即按下大寫鎖定,此后所有的輸入事件都會(huì)被觸發(fā)兩次,原因不知.
+沒有開啟輸入法的時(shí)候,方向鍵不會(huì)觸發(fā)事件,但是開啟輸入法后,方向鍵可以觸發(fā)事件.
+剪切和粘貼都會(huì)觸發(fā)事件.+tab鍵不處罰事件,開啟輸入法時(shí),按tab鍵觸發(fā)事件.
+按住shift和其他鍵(例如:數(shù)字鍵),每輸入一個(gè)字符觸發(fā)兩次事件.
Firefox:
+開啟輸入法時(shí),不能撲捉到事件,但是按下空格時(shí),可以觸發(fā)兩次事件.
+任何時(shí)候方向鍵都不觸發(fā)事件.
+開啟輸入法的時(shí)候,按下空格后,立即按下大寫鎖定,此后所有的輸入事件都會(huì)被觸發(fā)兩次,原因不知.
+按下tab鍵的時(shí)候不觸發(fā)事件.++Firefox頁面刷新的時(shí)候內(nèi)容會(huì)被保留在輸入框里.
+按住shift和其他鍵(例如:數(shù)字鍵),每輸入一個(gè)字符觸發(fā)兩次事件.
opera:
+正常情況下,在輸入框里按下tab鍵會(huì)觸發(fā)一次事件,但是此后只要不刷新頁面,tab鍵都不會(huì)再觸發(fā)此事件.
+開啟輸入法后不會(huì)觸發(fā)事件,開啟后,方向鍵和tab鍵都不觸發(fā)事件.
+開啟輸入法時(shí),按下空格只觸發(fā)一次事件,不會(huì)出現(xiàn)觸發(fā)兩次事件的情況.
+粘貼的時(shí)候觸發(fā)事件,剪切的時(shí)候不觸發(fā)
ie:
+輸入法不會(huì)觸發(fā)事件,按空格也都是只觸發(fā)一次,方向鍵任何時(shí)刻都不觸發(fā).
+刷新頁面的時(shí)候內(nèi)容會(huì)留在input里,而且注意,不管input是不是空的,刷新頁面后自動(dòng)觸發(fā)一次事件.
3.總結(jié).
就一句話,差異很大.
注意input事件可以用在chrome,Firefox,opera里,但是只能用 addEventListener綁定,不能用ontype形式,而onpropertychange可以用on形式,也可以用attachEvent綁定
其它在線演示說明:http://www.dhdzp.com/tools/keyboard_events.html
- jQuery實(shí)現(xiàn)表單input中提示文字value隨鼠標(biāo)焦點(diǎn)移進(jìn)移出而顯示或隱藏的代碼
- input輸入框的自動(dòng)匹配(原生代碼)
- 基于jQuery的input輸入框下拉提示層(自動(dòng)郵箱后綴名)
- js監(jiān)聽輸入框值的即時(shí)變化onpropertychange、oninput
- jQuery 版本的文本輸入框檢查器Input Check
- 制作符合用戶體驗(yàn)的漂亮的input輸入框
- javascritp實(shí)現(xiàn)input輸入框相關(guān)限制用法
- input 輸入框獲得/失去焦點(diǎn)時(shí)隱藏/顯示文字(jquery版)
相關(guān)文章
javascript HTML5 Canvas實(shí)現(xiàn)圓盤抽獎(jiǎng)功能
這篇文章主要為大家詳細(xì)介紹了javascript HTML5 Canvas實(shí)現(xiàn)圓盤抽獎(jiǎng)功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-04-04
JavaScript二維數(shù)組實(shí)現(xiàn)的省市聯(lián)動(dòng)菜單
這篇文章主要介紹了使用二維數(shù)組實(shí)現(xiàn)的省市聯(lián)動(dòng)菜單,通過二維數(shù)組存儲(chǔ)城市列表項(xiàng),需要的朋友可以參考下2014-05-05
ECHO.js 純javascript輕量級延遲加載的實(shí)例代碼
下面小編就為大家?guī)硪黄狤CHO.js 純javascript輕量級延遲加載的實(shí)例代碼。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
原生javascript中this幾種常見用法總結(jié)
這篇文章主要介紹了原生javascript中this幾種常見用法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript中this的功能、常見用法及操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
詳解JS 比較兩個(gè)Json對象的值是否相等的實(shí)例
這篇文章主要介紹了JS 比較兩個(gè)Json對象的值是否相等的實(shí)例,有需要的朋友可以參考一下2013-11-11
使用JS正則表達(dá)式 替換括號(hào),尖括號(hào)等
下面小編就為大家?guī)硪黄褂肑S正則表達(dá)式 替換括號(hào),尖括號(hào)等。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11

