JS鍵盤控制事件教程

2021-04-21 08:49:47 字數 2694 閱讀 3183

獲取鍵盤控制事件是實現互動性最有力的方法之一。  

首先需要了解的是如何初始化該事件,基本語句如下:  

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,它們分別對應...