快捷導(dǎo)航

javascript的鍵盤控制事件說明

更新時間：2008年04月15日 12:32:25 作者：

獲取鍵盤控制事件是實現(xiàn)交互性最有力的方法之一。

控制回車焦點問題：

 
<script type="text/javascript"> 
function submitForm() { 
if(window.event.keyCode==13) { 
document.getElementById('btnSearch').focus(); 
} 
} 
document.onkeydown=submitForm; 
</script> 

首先需要了解的是如何初始化該事件，基本語句如下：
　　 document.onkeydown = keyDown
　　當(dāng)瀏覽器讀到這個語句時，無論按下鍵盤上的哪個鍵，都將呼叫KeyDown()函數(shù)。
　　捕獲鍵盤事件對于不同的瀏覽器來說有點困難，我們分別的來學(xué)習(xí)不同瀏覽器的實現(xiàn)語句。
　　 Netscape
　　 Netscape的程序?qū)崿F(xiàn)要比IE麻煩，你必須放一個特別的語句，來使Netscape始終去檢查擊鍵事件，如果沒有這行語句，擊鍵事件將與按下鼠標(biāo)事件搞混。特別語句如下：
　　 document.onkeydown = keyDown
if (ns4) document.captureEvents(Event.KEYDOWN)
　　 keyDown()函數(shù)有一個隱藏的變量--一般的，我們使用字母“e”來表示這個函數(shù)。
　　 function keyDown(e)
　　變量e表示發(fā)生擊鍵事件，尋找是哪個鍵被按下，使用以下屬性：
　　 e.which
　　這將給出該鍵的索引值，把索引值轉(zhuǎn)化成該鍵的字母或數(shù)字值，寫：
　　 String.fromCharCode(e.which)
　　把上面的語句放在一起，我們可以知道被按下的是哪一個鍵：

復(fù)制代碼代碼如下:

 
　　 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，把鍵的索引值轉(zhuǎn)化為真實鍵值方法類似：String.fromCharCode(event.keyCode)，程序如下：

復(fù)制代碼代碼如下:

 
　　 function keyDown() { 
　　 var keycode = event.keyCode 
　　 var realkey = String.fromCharCode(event.keyCode) 
　　 alert("keycode: " + keycode + " realkey: " + realkey) 
} 
document.onkeydown = keyDown 
document.onkeydown = keyDown 

　　適用于兩者的程序
　　用兩種瀏覽器檢查上述實例，你會發(fā)現(xiàn)執(zhí)行結(jié)果不總是一樣的，這是因為兩種瀏覽器的鍵盤代碼設(shè)置不相同，因此你必須使用單獨的代碼分別來寫這段程序，而毫無別法。
　　建議你要完全忘掉實際的鍵值，僅僅使用鍵盤的代碼值來工作。下面這段程序?qū)⒁暻闆r而設(shè)置，如果是用IE的話，ieKey生效，把nKey設(shè)為0，如果是用Netscape的話，nKey生效，把nKey設(shè)為0，然后用一個警示框來顯示兩者的值：

復(fù)制代碼代碼如下:

 
　　 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) 

　　使用鍵盤移動對象
　　下面的程序?qū)崿F(xiàn)用鍵盤移動對象，程序?qū)z查哪一個鍵被按下，從而調(diào)用相應(yīng)的函數(shù)來移動對象。本例中，當(dāng)字母“A”被按下時，對象就開始移動，字母“A”鍵在nKey中的值是97，ieKey的值為65，在程序中將分別檢查這兩個值。

復(fù)制代碼代碼如下:

 
　　 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 // 這一句不一定需要，只是為了檢查狀態(tài) 
　　setTimeout("slide()",30) 
} 

　　增加 "Active"變量
　　上面程序稍微有些不足，對象移動以后就無法使它停止了，而且當(dāng)你多按幾次Ａ鍵時，物體將運動得越來越快，這里我們來修補它。
　　使用變量"active"來改變這種情況，插入if語句來檢查函數(shù)是否重復(fù)。

復(fù)制代碼代碼如下:

 
　　 function slide() { 
　　if (myobj.active) { 
　　myobj.xpos += 5 
　　myojb.left = myobj.xpos 
　　setTimeout("slide()",30) 
　　} 
} 

　　在這種情況中，slide()函數(shù)只有在myobj.active值為真的時候才會工作，當(dāng)myobj.active值為假時，對象將停止移動。
　　使用 onKeyUp 和 "Active" 變量
　　 onkeyup事件和onkeydown事件工作原理相同,用以下語句初始化該事件:

復(fù)制代碼代碼如下:

 
　　 document.onkeydown = keyDown 
document.onkeyup = keyUp 
if (ns4) document.captureEvents(Event.KEYDOWN | Event.KEYUP) 

　　 keyUp() 函數(shù)與之相同，當(dāng)一個鍵被放開時事件被激發(fā)，對象停止移動，并將active變量置為0：

復(fù)制代碼代碼如下:

 
　　 function keyUp(e) { 
　　if (ns4) var nKey = e.which 
　　if (ie4) var ieKey = window.event.keyCode 
　　if (nKey==97 || ieKey==65) 
　　block.active = false 
} 

　　下面是比較完整的程序：

復(fù)制代碼代碼如下:

 
　　 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) 
　　　} 
} 