Js監聽鍵盤事件

來源:互聯網
上載者:User

標籤:c   code   java   a   int   使用   

 表單提交的時候大多數使用者都習慣用斷行符號鍵來進行提交,頁面接受斷行符號鍵的處理如下:

 

if(navigator.userAgent.indexOf("MSIE")>0)  {          
 //IE           document.onkeydown=function(){
        if(13 == event.keyCode){
          alert(‘browser is ie and enter key down‘);
        }
      } }else{  
 //非IE           window.onkeydown=function(){
        if(13 == event.keyCode){
          alert(‘browser is not ie and enter key down‘);
        }

      } }

 

附常用功能鍵 
值 描述 

8 退格鍵
9 TAB 鍵
13 ENTER 鍵
16 SHIFT 鍵
 17 CTRL 鍵
20 CAPS LOCK 鍵
27 ESC 鍵
32 SPACEBAR 鍵
33 PAGEUP 鍵
34 PAGEDOWN 鍵
35 END 鍵
42 PRINT SCREEN 鍵
46 DEL 鍵
144 NUM LOCK 鍵


判斷方法:
  
  在填寫表單時,習慣性會按下斷行符號鍵,這將導致表單提交,很不好,這裡介紹一個方法截獲它。
  
    其實很簡單,只要在想截獲的地區增加Onkeydown事件函數,並在執行函數中寫下如下語句:
  
    if (window.event.keyCode==13) window.event.keyCode=0
  
    這樣就取消斷行符號鍵了
  
    如果想類比Tab鍵,只要寫成
  
    if (window.event.keyCode==13) window.event.keyCode=9
  
    就行了,它會跳到另一個元素上。


鍵盤事件
   
  名稱 說明 
  onkeypress
   這個事件在使用者按下並放開任何字母數字鍵時發生。系統按鈕(例如,方向鍵和功能鍵)無法得到識別。
   
  onkeyup
   這個事件在使用者放開任何先前按下的鍵盤鍵時發生。
   
  onkeydown
   這個事件在使用者按下任何鍵盤鍵(包括系統按鈕,如方向鍵和功能鍵)時發生。


在使用JavaScript做WEB鍵盤事件偵聽捕獲時,主要採用onkeypress、onkeydown、onkeyup三個事件進行出來。該三個事件的執行順序如下:onkeydown -> onkeypress ->onkeyup。在一般情況下,採用三種鍵盤事件均可對鍵盤輸入進行有效響應。當在實際使用中,會發現這幾者有些不同的差別。
  
   onkeypress事件不能對系統功能鍵(例如:後退、刪除等,其中對中文IME不能有效響應)進行正常的響應,onkeydown和onkeyup均可以對系統功能鍵進行有效攔截,但事件截獲的位置不同,可以根據具體的情況選擇不同的鍵盤事件。
   由於onkeypress不能對系統功能鍵進行捕獲,導致window.event對象的keyCode屬性和onkeydown,onkeyup鍵盤事件中擷取的keyCode屬性不同,主要表現在onkeypress事件的keyCode對字母的大小寫敏感,而onkeydown、onkeyup事件不敏感;onkeypress事件的keyCode無法區分主鍵盤上的數字鍵和付鍵盤數字鍵的,而onkeydown、onkeyup的keyCode對主付鍵盤的數字鍵敏感。 

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在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.