針對鍵盤事件的監聽,可以運用這個事件來達成!

寫法:

<input type="text" onkeyup="loveKeyboard(event)" onkeypress="likeKeyboard(event)"> // onkeypress和onkeyup於鎖定英文大寫時將得到不同結果

function loveKeyboard(event){
    var x = event.which || event.keyCode; // 針對不同瀏覽器的寫法
    return x;
}

function likeKeyboard(event){
    var y = event.which || event.keyCode; // 針對不同瀏覽器的寫法
    return y;
}

記住onkeydownonkeypressonkeyup的區別!

  • * onkeydown:時機為按鍵按下。大小寫Keycode皆相同。注意!! 使用者是可能久按鍵盤的,若要在使用者輸入時提供較良好的使用經驗,建議使用onfocus/onkeyup。
  • * onkeypress:時機為onkeydown後觸發。區分大小寫,辨別所謂的Character Code。但沒辦法辨識無法列印的按鍵,如CAPS LOCK、CTRL、ESC、F12等等。
  • * onkeyup:按鍵按起。大小寫Keycode皆相同。

 

更詳盡文章參考:MDN

 

 

 

keycode常用對應表:(常用的,詳盡的日後有空再補)

8Backspace 倒退鍵

9Tab

13Enter 確定

16Shift

17Ctrl

18Alt

27Esc / Escape

32Space 空白鍵

37← 方向左

38↑ 方向上

39→ 方向右

40↓ 方向下

46Delete 刪除

67C

83S

88X

 

以上。

文章標籤
創作者介紹

Askie's blog|與大家分享美好的生活、推薦實用的everything!

Askie 發表在 痞客邦 留言(0) 人氣()