DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> 鍵盤控制事件應用教程大全
鍵盤控制事件應用教程大全
編輯:JavaScript基礎知識     
獲取鍵盤控制事件是實現交互性最有力的方法之一。 

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

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

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

document.onkeydown = keyDown 
document.onkeydown = keyDown 

   適用於兩者的程序 

   用兩種浏覽器檢查上述實例,你會發現執行結果不總是一樣的,這是因為兩種浏覽器的鍵盤代碼設置不相同,因此你必須使用單獨的代碼分別來寫這段程序,而毫無別法。 

   建議你要完全忘掉實際的鍵值,僅僅使用鍵盤的代碼值來工作。下面這段程序將視情況而設置,如果是用IE的話,ieKey生效,把nKey設為0,如果是用Netscape的話,nKey生效,把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”被按下時,對象就開始移動,字母“A”鍵在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) { // 如果"A"鍵按下 
    slide() 
  } 

function slide() { 
  block.xpos += 5 
  block.left = block.xpos 
  status = block.xpos // 這一句不一定需要,只是為了檢查狀態 
  setTimeout("slide()",30) 


   增加 "Active"變量 

   上面程序稍微有些不足,對象移動以後就無法使它停止了,而且當你多按幾次A鍵時,物體將運動得越來越快,這裡我們來修補它。 

   使用變量"active"來改變這種情況,插入if語句來檢查函數是否重復。 

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


   在這種情況中,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) { 
  if (ns4) var nKey = e.which 
  if (ie4) var ieKey = window.event.keyCode 
  if (nKey==97 || ieKey==65) 
  block.active = false 


   下面是比較完整的程序: 

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved