頁面中的鍵盤控制

Capturing Keystrokes
相應敲擊鍵是電腦和人的基本相互作用。你可以控制任何一個鍵的按下和松開。首先我們先要
知道如何啟動一個所謂的事件 (event). 下面是啟動一個把鍵按下的"onkeydown" 的事件.
document.onkeydown = keyDown
這里的 keyDown 是你所要編寫的相應鍵盤的子程序。當你的瀏覽器讀了以上的語句， 它將會知
道哪個鍵被按下了，然后啟動子程序 keyDown()。 子程序的名字隨你起了，在這里在子程序名\r
字后面不需要括號。取得哪個鍵被按下卻在Netscape 和 IE 有所不同。看以下代碼,如果用的是
Netscaep, 變量 nKey 將會得到 key code, 而讓 ieKey 為 0. 相反, 如果用的是 IE, ieKey
為 key code 而 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" 鍵來啟動滑動子程序. Netscape 的 "A" 是 97. 而 IE 是 65. 也就
是說, 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) {
// if "A" key is pressed slide()
}
}
function slide() {
if (block.xpos < 300) {
block.xpos += 5 block.left = block.xpos status = block.xpos
// not needed, just for show
setTimeout("slide()",30)
}
}


啟動變量

我們這里介紹一種方法: 啟動變量, 來控制滑動的停止和啟動. 這個變量記錄了元素是否在動
還是不動. 然后在滑動子程序里放置 "if" 語句, 根據這個啟動變量的值來決定是否停止還是
繼續滑動.
代碼:
function slide() {
if (myobj.active) {
myobj.xpos += 5
myojb.left = myobj.xpos
setTimeout("slide()",30)
}
}

使用 onKeyUp 和啟動變量來控制滑動

onkeyup 就是 onkeydown 相反, 也就是說它用來對鍵起來這個事件做出反應的.
代碼:
document.onkeydown = keyDown
document.onkeyup = keyUp if (ns4)
document.captureEvents(Event.KEYDOWN | Event.KEYUP)

下面就是一個完整的程序代碼:

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