JavaScript 鍵盤事件 (方向鍵範例)

本文給出一個利用 JavaScript 來偵測方向鍵的範例。至於一般的鍵盤事件，只要把此範例稍微修改延伸即可達成（請順便閱讀下方參考）。先試看看下方demo：

Press Arrow Key or Any Other Key:

Demo原始碼 (HTML):

Press Arrow Key or Any Other Key:<br><br>
<div id="info"></div>

Demo原始碼 (JavaScript):

var Key = {
  LEFT:   37,
  UP:     38,
  RIGHT:  39,
  DOWN:   40
};

/**
 * old IE: attachEvent
 * Firefox, Chrome, or modern browsers: addEventListener
 */
function _addEventListener(evt, element, fn) {
  if (window.addEventListener) {
    element.addEventListener(evt, fn, false);
  }
  else {
    element.attachEvent('on'+evt, fn);
  }
}

function handleKeyboardEvent(evt) {
  if (!evt) {evt = window.event;} // for old IE compatible
  var keycode = evt.keyCode || evt.which; // also for cross-browser compatible

  var info = document.getElementById("info");
  switch (keycode) {
    case Key.LEFT:
      info.innerHTML += "&larr; ";
      break;
    case Key.UP:
      info.innerHTML += "&uarr; ";
      break;
    case Key.RIGHT:
      info.innerHTML += "&rarr; ";
      break;
    case Key.DOWN:
      info.innerHTML += "&darr; ";
      break;
    default:
      info.innerHTML += "SOMEKEY ";
  }
}

_addEventListener('keydown', document, handleKeyboardEvent);

跟鍵盤相關的事件有三個： onkeydown, onkeypress, onkeyup 。偵測方向鍵，請用 onkeydown (參看 [2]).

根據 MDN 的 KeyboardEvent 文檔，已經不贊成使用 event.keyCode 。應使用 event.key 。如果您想要支援非常舊的瀏覽器，請使用本文的範例。否則請參看 [5] 使用 event.key 的新範例。

參考

[1]	Keyboard events \| JavaScript Tutorial

[2]	keyboard events - Detecting arrow key presses in JavaScript - Stack Overflow

[3]	JavaScript - Detecting keystrokes - QuirksMode

[4]	JavaScript Madness: Keyboard Events

[5]	JavaScript Arrow Key Example via event.key in Keyboard Event