鍵盤控制事件應用教程大全

2021-08-31 05:12:56 字數 2541 閱讀 6621

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

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

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

} 點這裡看該例

這裡是乙個用數字鍵盤控制物件移動的例子

JS鍵盤控制事件教程

獲取鍵盤控制事件是實現互動性最有力的方法之一。首先需要了解的是如何初始化該事件,基本語句如下 document.onkeydown keydown 當瀏覽器讀到這個語句時,無論按下鍵盤上的哪個鍵,都將呼叫keydown 函式。捕獲鍵盤事件對於不同的瀏覽器來說有點困難,我們分別的來學習不同瀏覽器的實現...

javascript的鍵盤控制事件

獲取鍵盤控制事件是實現互動性最有力的方法之一。首先需要了解的是如何初始化該事件,基本語句如下 document.onkeydown keydown 當瀏覽器讀到這個語句時,無論按下鍵盤上的哪個鍵,都將呼叫keydown 函式。捕獲鍵盤事件對於不同的瀏覽器來說有點困難,我們分別的來學習不同瀏覽器的實現...

js鍵盤事件全面控制詳解

js鍵盤事件全面控制 主要分四個部分 第一部分 瀏覽器的按鍵事件 第二部分 相容瀏覽器 第三部分 實現和優化 第四部分 總結 第一部分 瀏覽器的按鍵事件 用js實現鍵盤記錄,要關注瀏覽器的三種按鍵事件型別,即keydown,keypress和keyup,它們分別對應onkeydown onkeypr...