JavaScript–擷取鍵盤控制事件

來源:互聯網
上載者:User

擷取鍵盤控制事件

   document.onkeydown = keyDown
   當瀏覽器讀到這個語句時,無論按下鍵盤上的哪個鍵,都將呼叫KeyDown()函數。

不同瀏覽器的實現:

   Netscape

   Netscape程式中必須放一個特別的語句,來使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
   

   適用於兩者的程式

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

   建議你完全忘掉實際的索引值,僅僅使用鍵盤的代碼值來工作。下面這段程式將視情況而設定,如果是用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)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.