【翻譯作品】JavaScript Event學習第十一章:按鍵的檢測

來源:互聯網
上載者:User
文章目錄
  • keyCode
  • charCode
  • 一些說明:

檢測使用者的按鍵是事件處理常式的一個很特別的環節。這一章我們著力解決一些非常棘手的問題,並且制定一個完備的表格。

第一個問題是對於按鍵事件來說根本就沒有標準,按照規範說的:包含鍵盤等輸入裝置的事件模型會在以後的DOM規範中作出解釋。

正如我們瞭解到的,瀏覽器在最開始設計的時候並沒有一個標準,大家都像做實驗似的,最後的成品雖然是有用的,但是肯定造成了相容性的問題。按鍵問題也不例外:這裡有兩個屬效能檢測到使用者按下了什麼鍵,雖然有足夠的理由為什麼需要兩個屬性,但是依然並不是所有的瀏覽器都支援。

另外,在keypress與keydown和keyup之間還有一些很重要的區別。

最後就是windows和mac的區別了,在mac上要檢測使用者按下了什麼鍵簡直比在windows下難了N倍。

keyCode和charCode

能檢測到使用者按下了什麼鍵的兩個屬性就是keyCode和charCode了。簡單說來:keyCode是用來檢測使用者真正按下了鍵盤上那個鍵的,而charCode則是給出鍵入字元的ASCII碼。有一些小問題需要注意:大寫的A和小寫a的keyCode是一樣的,因為他們在鍵盤上就是一個鍵;但是charCode不一樣,因為他倆是兩個不同的字元。

IE和Opera不支援charCode。然而他們會在keyCode裡面儲存字元資訊,但是只是在onkeypress的情況下,在onkeydown/up情況下包含的是鍵的資訊。

字元和數字鍵

讓我們以一個簡單的例子開始。小寫a的ASCII碼是97,大寫的是65。那麼在兩種情況下,當使用者在鍵盤上敲下相同的鍵的時候,什麼時候的索引值是65呢(相當於大寫的A)

keyCode

 

 

charCode

 

因此,在onkeydown/up的情況下,你能夠從keyCode裡面得到索引值。在onkeypress情況下,想要得到字元值就要使用:evt.charCode || evt.keyCode.

標點符號

我還是決定不對標點符號鍵做測試了。我懷疑這不僅跟瀏覽器和作業系統有關,還可能跟鍵盤設定和預設語言有關。我一般用的是荷蘭語版的windows,如果跟美國版的101鍵的鍵盤相比有很大出入,我一點都不會覺得意外。

比如說shift+,鍵出來的應該是<,但是我測試的ASCII碼的結果卻是’?’的。當我發現了這個問題,我決定還是不在標點符號鍵的問題上浪費時間了.

特別鍵

功能鍵就是只那些不能列印出來的但是卻具有一定功能的鍵。比如shift、ESC、enter等等都是功能鍵。

一些說明:

1、一般,mac的可靠性比windows要差,有些鍵可能檢測不到

2、IE不會觸發下面這鍵的keypress事件:delete, end, enter, escape, 功能鍵, home, insert, pageUp/Down 和 tab。

3、在onkeypress事件下,Safari會給下面這些鍵給出很奇怪的keyCode值:delete, end, 功能鍵, home 和 pageUp.Down。但是在onkeydown/up下面就很正常。

4、Alt,Cmd,Ctrl和shfit鍵在mac上無法探測,不過Opera下面例外。然而你卻可以使用altKey,ctrlKey,shfitKey這些屬性。

 

如果你需要探測這些鍵,你就探測一下載onkeydown/up下面的keyCode就行了,算是給自己幫忙了,onkeypress和charCode就忘掉吧。

 

原文後面有個大的索引值的列表,還有一個測試框,有興趣的童鞋可以移步。

翻譯地址:http://www.quirksmode.org/js/keys.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.