LANG SELRCT

コードを書く場所

2019年12月29日日曜日

押したキーの情報を取得したい


KeyboardEvent の中で以下のプロパティの値を取得した時の備忘録

charCodeはkeypressで他はkeydownで取得しています


デモ

keyCode
which
code
key
altKey
ctrlKey
shiftKey
metaKey
charCode




コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
  <body>
    <table>
      <tbody>
        <tr><td>keyCode</td><td id="keyCode"></td></tr>
        <tr><td>which</td><td id="which"></td></tr>
        <tr><td>code</td><td id="code"></td></tr>
        <tr><td>key</td><td id="key"></td></tr>
        <tr><td>altKey</td><td id="altKey"></td></tr>
        <tr><td>ctrlKey</td><td id="ctrlKey"></td></tr>
        <tr><td>shiftKey</td><td id="shiftKey"></td></tr>
        <tr><td>metaKey</td><td id="metaKey"></td></tr>
        <tr><td>charCode</td><td id="charCode"></td></tr>
      </tbody>
    </table>
<script>
document.body.onkeydown = bodyKeyDown;
document.body.onkeypress = bodyKeyPress;

function elem(id) {
  return document.getElementById(id);
}

function bodyKeyDown(e) {
  elem("keyCode").textContent = e.keyCode;
  elem("which").textContent = e.which;  
  elem("code").textContent = e.code;
  elem("key").textContent = e.key;
  elem("altKey").textContent = e.altKey;
  elem("ctrlKey").textContent = e.ctrlKey;
  elem("shiftKey").textContent = e.shiftKey;
  elem("metaKey").textContent = e.metaKey;
}

function bodyKeyPress(e) {
  elem("charCode").textContent = e.charCode;
}
</script>
  </body>
</html>