獲取鍵盤控制事件是實現互動性最有力的方法之一。
首先需要了解的是如何初始化該事件,基本語句如下:
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)
document.onkeydown = keydown
document.captureevents(event.keydown)
internet explorer
ie的程式與netscape類似,但它不需要e變數,用window.event.keycode來代替e.which,把鍵的索引值轉化為真實鍵值方法類似:string.fromcharcode(event.keycode),程式如下:
function keydown()
document.onkeydown = keydown
document.onkeydown = keydown
適用於兩者的程式
用兩種瀏覽器檢查上述例項,你會發現執行結果不總是一樣的,這是因為兩種瀏覽器的鍵盤**設定不相同,因此你必須使用單獨的**分別來寫這段程式,而毫無別法。
建議你要完全忘掉實際的鍵值,僅僅使用鍵盤的**值來工作。下面這段程式將視情況而設定,如果是用ie的話,iekey生效,把nkey設為0,如果是用netscape的話,nkey生效,把nkey設為0,然後用乙個警示框來顯示兩者的值:
function keydown(e)
if (ie4)
alert("nkey:"+nkey+" iekey:" + iekey)
}
document.onkeydown = keydown
if (ns4) document.captureevents(event.keydown)
使用鍵盤移動物件
下面的程式實現用鍵盤移動物件,程式將檢查哪乙個鍵被按下,從而呼叫相應的函式來移動物件。本例中,當字母「a」被按下時,物件就開始移動,字母「a」鍵在nkey中的值是97,iekey的值為65,在程式中將分別檢查這兩個值。
function init()
function keydown(e)
if (ie4)
if (nkey==97 || iekey==65)
}
function slide()
增加 "active"變數
上面程式稍微有些不足,物件移動以後就無法使它停止了,而且當你多按幾次a鍵時,物體將運動得越來越快,這裡我們來修補它。
使用變數"active"來改變這種情況,插入if語句來檢查函式是否重複。
function slide()
}
在這種情況中,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)
下面是比較完整的程式:
function init()
function keydown(e)
if (ie4)
if ((nkey==97 || iekey==65) && !block.active)
}
function keyup(e)
if (ie4)
if (nkey==97 || iekey==65)
}
function slide()
}
鍵盤控制事件應用教程大全
獲取鍵盤控制事件是實現互動性最有力的方法之一。首先需要了解的是如何初始化該事件,基本語句如下 document.onkeydown keydown 當瀏覽器讀到這個語句時,無論按下鍵盤上的哪個鍵,都將呼叫keydown 函式。捕獲鍵盤事件對於不同的瀏覽器來說有點困難,我們分別的來學習不同瀏覽器的實現...
js鍵盤事件全面控制詳解
js鍵盤事件全面控制 主要分四個部分 第一部分 瀏覽器的按鍵事件 第二部分 相容瀏覽器 第三部分 實現和優化 第四部分 總結 第一部分 瀏覽器的按鍵事件 用js實現鍵盤記錄,要關注瀏覽器的三種按鍵事件型別,即keydown,keypress和keyup,它們分別對應onkeydown onkeypr...
js鍵盤事件全面控制詳解
js鍵盤事件全面控制詳解 王小摳 js鍵盤事件全面控制 主要分四個部分 第一部分 瀏覽器的按鍵事件 第二部分 相容瀏覽器 第三部分 實現和優化 第四部分 總結 第一部分 瀏覽器的按鍵事件 用js實現鍵盤記錄,要關注瀏覽器的三種按鍵事件型別,即keydown,keypress和keyup,它們分別對應...