首頁技術(shù)文章正文

什么是鍵盤事件?鍵盤事件對象判斷用戶按鍵

更新時間:2022-03-17 來源:黑馬程序員 瀏覽量:

什么是鍵盤事件

鍵盤事件是指用戶在使用鍵盤時觸發(fā)的事件。例如,用戶按Esc鍵關(guān)閉打開的狀態(tài)欄,按Enter鍵直接完成光標(biāo)的上下切換等。下面列舉幾個常用的鍵盤事件,如表所示。

事件名稱事件觸發(fā)時機
keypress某個鍵盤按鍵被按下時觸發(fā)。不識別功能鍵,如Ctrl、Shit、箭頭等
keydown某個鍵盤按鍵被按下時觸發(fā)
keyup某個鍵盤按鍵被松開時觸發(fā)

需要注意的是,keypress事件保存的按鍵值是ASCⅡ碼,keydown和keyup事件保存的按鍵值是虛擬鍵碼,keydown和keypress如果按住不放的話,會重復(fù)觸發(fā)該對應(yīng)事件。keyup和keydown事件不區(qū)分字母大小寫,而keypress區(qū)分字母大小寫。

在發(fā)生keydown和keypress事件時,event事件對象的keycode屬性會包含一個值,該值與鍵盤上的特定值對應(yīng)。keycode的值與ASCⅡ碼對應(yīng)的值相同,例如,keycode值為13表示Enter鍵,keycode值為9表示Tab鍵。讀者可參考MDN等手冊進(jìn)行查看,此處不再詳細(xì)列舉。

鍵盤事件對象判斷用戶按下了哪個鍵

鍵盤事件也有相應(yīng)的鍵盤事件對象KeyBoardEvent,該對象是跟鍵盤事件相關(guān)的一系列信息的集合。根據(jù)鍵盤事件對象中的keyCode屬性可以得到相應(yīng)的ASCIⅡ碼值,進(jìn)而可以判斷用戶按下了哪個鍵。

為了讓大家更好地理解鍵盤事件的使用,下面我們通過案例的形式進(jìn)行展示。檢測用戶是否按下了s鍵,如果按下s鍵,就把光標(biāo)定位到搜索框里面,示例代碼如下:

<body>
  <input type="text">
  <script>
    var search = document.querySelector ('input');
    document.addEventListener('keyup', function (e)  {
      if  (e.keyCode === 83)  {
        search.focus();
      }
    });
  </script>
</body>

上述代碼中,第5行代碼綁定了鼠標(biāo)彈起事件,當(dāng)輸入完畢后再進(jìn)行檢測。第6~8行代碼使用鍵盤事件對象里面的keyCode判斷用戶按下的是否是s鍵,如果是,則讓搜索框獲取焦點,幫助用戶進(jìn)行輸入。






猜你喜歡:

什么是事件?怎樣調(diào)用事件處理程序?

DOM有多少事件級別?DOM事件級別

Watch機制的通知狀態(tài)和事件類型

Javascript事件類型以及常用方法有哪些?

黑馬程序員web前端開發(fā)培訓(xùn)

分享到:
在線咨詢 我要報名
和我們在線交談!