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]).

根據 MDNKeyboardEvent 文檔,已經不贊成使用 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