js & option keycode

js & option keycode

js get option keycode

https://keycode.info/

option

https://github.com/wesbos/keycodes

https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

KeyboardEvent

keyCode 👎

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

which 👎

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which

    document.addEventListener("keyup", function(e) {
        let key = e.which || e.keyCode;
        // console.log(`keyup & e =`, e);
        // console.log(`e.keyCode =`, e.keyCode);
        // console.log(`e.which =`, e.keyCode);
        // console.log(`key =`, key);
        if(e.which === 17) {
            // init
            isCtrl = false;
        }
    });

key 👍 ✅

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

code 👍 ✅

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code

let textarea = document.getElementById('test-target'),
consoleLog = document.getElementById('console-log'),
btnClearConsole = document.getElementById('btn-clear-console');

function logMessage(message) {
  document.getElementById("console-log").innerHTML += message + "<br>";
}

textarea.addEventListener('keydown', (e) => {
  if (!e.repeat)
    logMessage(`Key "${e.key}" pressed  [event: keydown]`);
  else
    logMessage(`Key "${e.key}" repeating  [event: keydown]`);
});

textarea.addEventListener('beforeinput', (e) => {
  logMessage(`Key "${e.data}" about to be input  [event: beforeinput]`);
});

textarea.addEventListener('input', (e) => {
  logMessage(`Key "${e.data}" input  [event: input]`);
});

textarea.addEventListener('keyup', (e) => {
  logMessage(`Key "${e.key}" released  [event: keyup]`);
});

btnClearConsole.addEventListener('click', (e) => {
  let child = consoleLog.firstChild;
  while (child) {
   consoleLog.removeChild(child);
   child = consoleLog.firstChild;
  }
});

window.addEventListener("keydown", function(event) {
  if (event.defaultPrevented) {
    return; // Do nothing if event already handled
  }
 
  switch(event.code) {
    case "KeyS":
    case "ArrowDown":
      // Handle "back"
      updatePosition(-moveRate);
      break;
    case "KeyW":
    case "ArrowUp":
      // Handle "forward"
      updatePosition(moveRate);
      break;
    case "KeyA":
    case "ArrowLeft":
      // Handle "turn left"
      angle -= turnRate;
      break;
    case "KeyD":
    case "ArrowRight":
      // Handle "turn right"
      angle += turnRate;
      break;
  }
 
  refresh();
 
  // Consume the event so it doesn't get handled twice
  event.preventDefault();
}, true);

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---