JavaScript Event學(xué)習(xí)第十一章 按鍵的檢測(cè)
正如我們了解到的，瀏覽器在最開始設(shè)計(jì)的時(shí)候并沒有一個(gè)標(biāo)準(zhǔn)，大家都像做實(shí)驗(yàn)似的，最后的成品雖然是有用的，但是肯定造成了兼容性的問題。按鍵問題也不例外：這里有兩個(gè)屬性能檢測(cè)到用戶按下了什么鍵，雖然有足夠的理由為什么需要兩個(gè)屬性，但是依然并不是所有的瀏覽器都支持。
另外，在keypress與keydown和keyup之間還有一些很重要的區(qū)別。
最后就是windows和mac的區(qū)別了，在mac上要檢測(cè)用戶按下了什么鍵簡(jiǎn)直比在windows下難了N倍。
keyCode和charCode
能檢測(cè)到用戶按下了什么鍵的兩個(gè)屬性就是keyCode和charCode了。簡(jiǎn)單說來：keyCode是用來檢測(cè)用戶真正按下了鍵盤上那個(gè)鍵的，而charCode則是給出鍵入字符的ASCII碼。有一些小問題需要注意：大寫的A和小寫的a的keyCode是一樣的，因?yàn)樗麄冊(cè)阪I盤上就是一個(gè)鍵；但是charCode不一樣，因?yàn)樗麄z是兩個(gè)不同的字符。
IE和Opera不支持charCode。然而他們會(huì)在keyCode里面保存字符信息，但是只是在onkeypress的情況下，在onkeydown/up情況下包含的是鍵的信息。
字符和數(shù)字鍵
讓我們以一個(gè)簡(jiǎn)單的例子開始。小寫a的ASCII碼是97，大寫的是65。那么在兩種情況下，當(dāng)用戶在鍵盤上敲下相同的鍵的時(shí)候，什么時(shí)候的鍵值是65呢（相當(dāng)于大寫的A）
keyCode
charCode
因此，在onkeydown/up的情況下，你能夠從keyCode里面得到鍵值。在onkeypress情況下，想要得到字符值就要使用：evt.charCode || evt.keyCode.
標(biāo)點(diǎn)符號(hào)
我還是決定不對(duì)標(biāo)點(diǎn)符號(hào)鍵做測(cè)試了。我懷疑這不僅跟瀏覽器和操作系統(tǒng)有關(guān)，還可能跟鍵盤設(shè)置和默認(rèn)語言有關(guān)。我一般用的是荷蘭語版的windows，如果跟美國(guó)版的101鍵的鍵盤相比有很大出入，我一點(diǎn)都不會(huì)覺得意外。
比如說shift+,鍵出來的應(yīng)該是<，但是我測(cè)試的ASCII碼的結(jié)果卻是'?'的。當(dāng)我發(fā)現(xiàn)了這個(gè)問題，我決定還是不在標(biāo)點(diǎn)符號(hào)鍵的問題上浪費(fèi)時(shí)間了.
特別鍵
功能鍵就是只那些不能打印出來的但是卻具有一定功能的鍵。比如shift、ESC、enter等等都是功能鍵。
一些說明：
1、一般，mac的可靠性比windows要差，有些鍵可能檢測(cè)不到
2、IE不會(huì)觸發(fā)下面這鍵的keypress事件：delete, end, enter, escape, 功能鍵, home, insert, pageUp/Down 和 tab。
3、在onkeypress事件下，Safari會(huì)給下面這些鍵給出很奇怪的keyCode值：delete, end, 功能鍵, home 和 pageUp.Down。但是在onkeydown/up下面就很正常。
4、Alt,Cmd,Ctrl和shfit鍵在mac上無法探測(cè)，不過Opera下面例外。然而你卻可以使用altKey，ctrlKey，shfitKey這些屬性。
如果你需要探測(cè)這些鍵，你就探測(cè)一下載onkeydown/up下面的keyCode就行了，算是給自己幫忙了，onkeypress和charCode就忘掉吧。
原文后面有個(gè)大的鍵值的列表，還有一個(gè)測(cè)試框，有興趣的童鞋可以移步。
翻譯地址：http://www.quirksmode.org/js/keys.html
轉(zhuǎn)載請(qǐng)保留以下信息
作者：北玉(tw:@rehawk)
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)漫畫中大雨滂沱的效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
javascript實(shí)現(xiàn)簡(jiǎn)單小鋼琴有聲彈奏效果
用HTML5+javascript實(shí)現(xiàn)的小鋼琴,按下鋼琴鍵上的相應(yīng)字母用或用鼠標(biāo)點(diǎn)擊鋼琴鍵發(fā)聲,javascript代碼包含了對(duì)鼠標(biāo)按下、移動(dòng)和松開,以及鍵盤按下的事件監(jiān)聽2024-02-02
閉包：是指有權(quán)訪問另外一個(gè)函數(shù)作用域中的變量的函數(shù)。創(chuàng)建閉包的常見方式就是在一個(gè)函數(shù)內(nèi)部創(chuàng)建另外一個(gè)函數(shù)。在javascript中沒有塊級(jí)作用域，一般為了給某個(gè)函數(shù)申明一些只有該函數(shù)才能使用的局部變量時(shí)，我們就會(huì)用到閉包，我們來詳細(xì)探討下2015-07-07
原生JavaScrpit中異步請(qǐng)求Ajax實(shí)現(xiàn)方法
這篇文章主要介紹了原生JavaScrpit中異步請(qǐng)求Ajax實(shí)現(xiàn)方法，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2017-11-11
ES6學(xué)習(xí)筆記之let、箭頭函數(shù)和剩余參數(shù)
ES6為我們?cè)诤瘮?shù)的使用上也提供了許多的便捷的東西,下面這篇文章主要給大家介紹了關(guān)于ES6學(xué)習(xí)筆記之let、箭頭函數(shù)和剩余參數(shù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
ES6初步了解原始數(shù)據(jù)類型Symbol的用法
ES6中為我們新增了一個(gè)原始數(shù)據(jù)類型Symbol,大家是否知道Symbol可以作用在哪?用來定義對(duì)象的私有變量如何寫入對(duì)象,本文對(duì)ES6 Symbol的用法介紹的非常詳細(xì),需要的朋友參考下吧2023-10-10
javascript實(shí)現(xiàn)的固定位置懸浮窗口實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)的固定位置懸浮窗口,以一個(gè)完整實(shí)例形式詳細(xì)分析了javascript實(shí)現(xiàn)固定位置懸浮窗口的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
functional繼承模式 摘自javascript:the good parts
javascript:the good parts 書中Inheritance部分講到了一種functional的繼承方式, 具體這個(gè)functional該如何翻譯,就不是很清楚了, 就直接意會(huì)一下吧2011-06-06
javascript 觸發(fā)HTML元素綁定的函數(shù)
只能觸發(fā)函數(shù)的執(zhí)行，并不能完全模擬出實(shí)際的點(diǎn)擊。2010-09-09
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)列表向上無限滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01