JS—鍵盤與文本事件

對(duì)鍵盤事件的支持主要遵循DOM0級(jí),雖然DOM3級(jí)為鍵盤事件制定了規(guī)范,但是并不是所有瀏覽器的支持的。為了提高網(wǎng)頁的兼容性,還是盡量避免使用兼容性不高的事件。


三個(gè)鍵盤事件一個(gè)文本事件,這四個(gè)事件均是與鍵盤有關(guān)系。

  • 鍵盤事件

  • keydown:當(dāng)用戶按下鍵盤任意鍵時(shí)觸發(fā)

  • keypress:當(dāng)用戶按下鍵盤字符鍵(按下后,文本框可以顯示的)時(shí)觸發(fā)

  • keyup:當(dāng)用戶釋放鍵盤上的鍵時(shí)觸發(fā)

  • 操作
    1、用戶按下鍵盤上的字符鍵時(shí),首先會(huì)觸發(fā)keydown事件,然后緊接著為keypress事件,最后觸發(fā)keyup事件。其中前兩個(gè)是文本框發(fā)生變化之前觸發(fā)的,后一個(gè)是在文本框發(fā)生變化后觸發(fā)的。
    2、當(dāng)用戶按下的是一個(gè)非字符鍵時(shí),首先會(huì)觸發(fā)keydown事件,然后就觸發(fā)keyup事件。
    注意
    使用這些事件時(shí),也有需要注意的地方。
    1、英文輸入法下,所有瀏覽器都支持這三個(gè)事件。
    keydown/keyup組合不區(qū)分英文字母大小寫,檢測(cè)他們的keycode屬性時(shí),都為大寫碼。
    keypress區(qū)分大小寫。
    2、中文輸入法下,個(gè)瀏覽器針對(duì)字符鍵的表現(xiàn)不一致。
    IE、chrome、Safari
    凡是由于輸入法區(qū)別,而造成鍵盤上的按鍵表現(xiàn)不一致的鍵,在keydown事件的keycode值為229,(什么意思呢?你看,12345這些按鍵,不論是什么輸入法下,顯示都一樣,所以支持keydown、keypress、keyup,但是像字母鍵,逗號(hào),,分號(hào);;這些輸入法不一樣表現(xiàn)就不一樣的,那么他們不支持keypress,keydown值為229,keyup值為英文輸入法下的keycode值)。
    FF:對(duì)于keydown與keypress的理解同上,只不過,這個(gè)keydown值為0,對(duì)于keyup是在,輸入完成后,才觸發(fā)的。什么意思呢,就是我們利用輸入法輸入中文時(shí),不是先大一些拼音然后按住空格或者回車么,up事件就是在這個(gè)時(shí)候,當(dāng)我們按住回車或者空格時(shí)才觸發(fā).
    opera:我測(cè)試了最新版本的歐朋,結(jié)果與chrome一致。

  • 鍵盤事件的屬性

  • keycode該屬性上一部分一直說,他包含一個(gè)代碼對(duì)應(yīng)ASCII碼。
    【差別】瀏覽器之間的差別,除了上面提到的部分,還有需要注意的地方。
    火狐瀏覽器:字符鍵的keypress事件的keycode值,不論中英輸入法,均為0值。
    ;這個(gè)字符,在keydown/up事件中,keycode值為186(英文輸入法),但是在keypress事件中,值為59

  • charcode
    該屬性是在發(fā)生keypress事件時(shí)發(fā)生,發(fā)生該事件時(shí),keycode可能為0,可能為ascii碼,而如果瀏覽器支持這個(gè)屬性,那么他的值為ascii碼。
    getcharcode:function(event){
    if(typeof event.charCode=="number"){
    return event.charCode;
    }else{
    return event.keyCode;
    }
    }
    上述代碼是避免瀏覽器不支持charcode屬性。

  • dom3級(jí)還有一些變化,但是瀏覽器支持程度太差,沒有多少人愿意用,我就不寫筆記啦

  • textInput
    當(dāng)用戶輸入可以顯示的字符時(shí),觸發(fā)這個(gè)事件。區(qū)別keypress事件,當(dāng)用戶按下退格鍵時(shí),并不會(huì)觸發(fā)textInput事件。
    該事件對(duì)象還有一個(gè)屬性叫data。這個(gè)屬性的值就是輸入的字符本身的值。
    先觸發(fā)該事件,才能顯示該字符。


對(duì)要輸入的字符進(jìn)行提前驗(yàn)證,是該類事件的一個(gè)重要應(yīng)用。日后會(huì)補(bǔ)上一篇的。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容