獲取鍵盤控制事件是實現交互性最有力的方法之一。??
???
?　　?首先需要了解的是如何初始化該事件，基本語句如下：??
???
?　　?document.onkeydown?=?keyDown??
???
?　　?當瀏覽器讀到這個語句時，無論按下鍵盤上的哪個鍵，都將呼叫KeyDown()函數。??
???
?　　?捕獲鍵盤事件對于不同的瀏覽器來說有點困難，我們分別的來學習不同瀏覽器的實現語句。??
???
?　　?Netscape??
???
?　　?Netscape的程序實現要比IE麻煩，你必須放一個特別的語句，來使Netscape始終去檢查擊鍵事件，如果沒有這行語句，擊鍵事件將與按下鼠標事件搞混。特別語句如下：??
???
?　　?document.onkeydown?=?keyDown??
?if?(ns4)?document.captureEvents(Event.KEYDOWN)??
???
?　　?keyDown()函數有一個隱藏的變量--一般的，我們使用字母“e”來表示這個函數。??
???
?　　?function?keyDown(e)??
???
?　　?變量e表示發生擊鍵事件，尋找是哪個鍵被按下，使用以下屬性：??
???
?　　?e.which??
???
?　　?這將給出該鍵的索引值，把索引值轉化成該鍵的字母或數字值，寫：??
???
?　　?String.fromCharCode(e.which)??
???
?　　?把上面的語句放在一起，我們可以知道被按下的是哪一個鍵：??
???
?　　?function?keyDown(e)?{??
?　　var?keycode?=?e.which??
?　　var?realkey?=?String.fromCharCode(e.which)??
?　　alert("keycode:?"?+?keycode?+?"?realkey:?"?+?realkey)??
?}??
???
?　　?document.onkeydown?=?keyDown??
?document.captureEvents(Event.KEYDOWN)??
???
?　　?Internet?Explorer??
???
?　　?IE的程序與Netscape類似，但它不需要e變量，用window.event.keyCode來代替e.which，把鍵的索引值轉化為真實鍵值方法類似：String.fromCharCode(event.keyCode)，程序如下：??
???
?　　?function?keyDown()?{??
?　　?var?keycode?=?event.keyCode??
?　　?var?realkey?=?String.fromCharCode(event.keyCode)??
?　　?alert("keycode:?"?+?keycode?+?"?realkey:?"?+?realkey)??
?}??
?document.onkeydown?=?keyDown??
?document.onkeydown?=?keyDown??
???
?　　?適用于兩者的程序??
???
?　　?用兩種瀏覽器檢查上述實例，你會發現執行結果不總是一樣的，這是因為兩種瀏覽器的鍵盤代碼設置不相同，因此你必須使用單獨的代碼分別來寫這段程序，而毫無別法。??
???
?　　?建議你要完全忘掉實際的鍵值，僅僅使用鍵盤的代碼值來工作。下面這段程序將視情況而設置，如果是用IE的話，ieKey生效，把nKey設為0，如果是用Netscape的話，nKey生效，把nKey設為0，然后用一個警示框來顯示兩者的值：??
???
?　　?function?keyDown(e)?{??
?　　if?(ns4)?{??
?　　　var?nKey=e.which;??
?　　　var?ieKey=0??
?　　}??
?　　if?(ie4)?{??
?　　　var?ieKey=event.keyCode;??
?　　　var?nKey=0??
?　　}??
?　　alert("nKey:"+nKey+"?ieKey:"?+?ieKey)??
?}??
?document.onkeydown?=?keyDown??
?if?(ns4)?document.captureEvents(Event.KEYDOWN)??
???
?　　?使用鍵盤移動對象??
???
?　　?下面的程序實現用鍵盤移動對象，程序將檢查哪一個鍵被按下，從而調用相應的函數來移動對象。本例中，當字母“A”被按下時，對象就開始移動，字母“A”鍵在nKey中的值是97，ieKey的值為65，在程序中將分別檢查這兩個值。??
???
?　　?function?init()?{??
?　　if?(ns4)?block?=?document.blockDiv??
?　　if?(ie4)?block?=?blockDiv.style??
?　　block.xpos?=?parseInt(block.left)??
?　　document.onkeydown?=?keyDown??
?　　if?(ns4)?document.captureEvents(Event.KEYDOWN)??
?}??
?function?keyDown(e)?{??
?　　if?(ns4)?{?var?nKey=e.which;?var?ieKey=0?}??
?　　if?(ie4)?{?var?ieKey=event.keyCode;?var?nKey=0?}??
?　　if?(nKey==97?||?ieKey==65)?{?//?如果"A"鍵按下??
?　　　　slide()??
?　　}??
?}??
?function?slide()?{??
?　　block.xpos?+=?5??
?　　block.left?=?block.xpos??
?　　status?=?block.xpos?//?這一句不一定需要，只是為了檢查狀態??
?　　setTimeout("slide()",30)??
?}??
???
?　　?增加?"Active"變量??
???
?　　?上面程序稍微有些不足，對象移動以后就無法使它停止了，而且當你多按幾次Ａ鍵時，物體將運動得越來越快，這里我們來修補它。??
???
?　　?使用變量"active"來改變這種情況，插入if語句來檢查函數是否重復。??
???
?　　?function?slide()?{??
?　　if?(myobj.active)?{??
?　　myobj.xpos?+=?5??
?　　myojb.left?=?myobj.xpos??
?　　setTimeout("slide()",30)??
?　　}??
?}??
???
?　　?在這種情況中，slide()函數只有在myobj.active值為真的時候才會工作，當myobj.active值為假時，對象將停止移動。??
???
?　　?使用?onKeyUp?和?"Active"?變量??
???
?　　?onkeyup事件和onkeydown事件工作原理相同,用以下語句初始化該事件:??
???
?　　?document.onkeydown?=?keyDown??
?document.onkeyup?=?keyUp??
?if?(ns4)?document.captureEvents(Event.KEYDOWN?|?Event.KEYUP)??
???
?　　?keyUp()?函數與之相同，當一個鍵被放開時事件被激發，對象停止移動，并將active變量置為0：??
???
?　　?function?keyUp(e)?{??
?　　if?(ns4)?var?nKey?=?e.which??
?　　if?(ie4)?var?ieKey?=?window.event.keyCode??
?　　if?(nKey==97?||?ieKey==65)??
?　　block.active?=?false??
?}??
???
?　　?下面是比較完整的程序：??
???
?　　?function?init()?{??
?　　if?(ns4)?block?=?document.blockDiv??
?　　if?(ie4)?block?=?blockDiv.style??
?　　block.xpos?=?parseInt(block.left)??
?　　block.active?=?false??
?　　document.onkeydown?=?keyDown??
?　　document.onkeyup?=?keyUp??
?　　if?(ns4)?document.captureEvents(Event.KEYDOWN?|?Event.KEYUP)??
?}??
?function?keyDown(e)?{??
?　　if?(ns4)?{var?nKey=e.which;?var?ieKey=0}??
?　　if?(ie4)?{var?ieKey=event.keyCode;?var?nKey=0}??
?　　if?((nKey==97?||?ieKey==65)?&&?!block.active)?{?//?if?"A"?key?is?pressed??
?　　　　block.active?=?true?slide()??
?　　}??
?}??
?function?keyUp(e)?{??
?　　if?(ns4)?{var?nKey=e.which;?var?ieKey=0}??
?　　if?(ie4)?{var?ieKey=event.keyCode;?var?nKey=0}??
?　　if?(nKey==97?||?ieKey==65)?{??
?　　block.active?=?false?//?if?"A"?key?is?released??
?　　}??
?}??
?function?slide()?{??
?　　?if?(block.active)?{??
?　　　　block.xpos?+=?5??
?　　　　block.left?=?block.xpos??
?　　　　status?=?block.xpos?//?not?needed,?just?for?show??
?　　　　setTimeout("slide()",30)??
?　　　}??
?}??
???
?　　?點這里看該例??
???
?　　?這里是一個用數字鍵盤控制對象移動的例子?? 《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的键盘控制事件应用教程大全的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。