1. 程式人生 > 實用技巧 >js_鍵盤與輸入事件

js_鍵盤與輸入事件

目錄

按下的是非字元鍵時

  • 僅觸發keydownkeyup事件,通過event.keyCode可以查詢按下的是什麼鍵。
  • 按下鍵按住不放會重複觸發keydown事件,出於效能考慮有必要進行防抖處理或者進行其它限制。

按下的是字元鍵時

  • input輸入框中按下字元鍵,觸發keydown,keypress,textInput,keyup事件。
  • document按下字元鍵,觸發keydown,keypress,keyup事件。
  • keypress在使用者按下某個字元鍵時觸發,無論這個字元是否顯示。通過charCode屬性獲取按鍵字元對應的ASCII編碼,再通過String.fromCharCode()
    方法獲取輸入值。在DOM3事件中被廢棄,轉而推薦textInput事件。
  • 按下字元鍵不放會重複觸發keydownkeypress
  • textInput事件只能在輸入框中觸發,通過data屬性獲取輸入的字元。

使用中文輸入法時

  • document中與英文輸入法無區別
  • 在輸入框中,每次按鍵會觸發keyup事件兩次且兩次觸發的e.keyCode不一致,其觸發順序為keydown,keyup,keyup
  • 通過按鍵選中輸入法中的候選字元時,觸發順序為keydown,textInput,keyup,keyup
  • textInput事件的data屬性返回的只是編輯區域內的文字。通過點選字元鍵1選取某個漢字時,e.data
    返回的是具體的漢字文字而不是字元1