LANG SELRCT

コードを書く場所についてはこちら

2018年9月30日日曜日

キーを押して放したことを検知したい(シンプル版)


キーを押して放したことを検知したい
をシンプルにしたくて書きました

  • キーを押したら
    テキストエリアにそのキーコードを入れる

  • キーを放したら
    テキストエリアからそのキーコードを消す

ここで対象にするキーは以下4つの装飾キーです
“command”: 91
“shift”: 16
“control”: 17
“option”: 18


デモ





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




index.html
<!DOCTYPE html>
<html>
<body>
  <textarea id="key_down_ta"  disabled></textarea>
  <script>
  /************************************
グローバル
************************************/
var key_down_ta = elem("key_down_ta");

/************************************
イベント
************************************/
document.onkeydown = function(e) { down_up_keycode(e, "down") };
document.onkeyup = function(e) { down_up_keycode(e, "up") };

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


/************************************
装飾キー
“command”: 91
“shift”: 16
“control”: 17
“option”: 18
************************************/
var modifier_key = /91|16|17|18/;

/************************************
down_up_keycode
************************************/
function down_up_keycode(e, flag) {
  var keycode = get_keycode(e);
  var is_modifier_key = modifier_key.test(keycode.toString());
  if (is_modifier_key === true) {
    var down_value = key_down_ta.value;
    switch (flag) {
      case "down":
        key_down_ta.value = "";
        key_down_ta.value += down_value + keycode + ",";
        break;
      case "up":
        var result = down_value.replace(keycode + ",", "");
        key_down_ta.value = result;
        break;
    }
  }
}

/************************************
get_keycode
************************************/
function get_keycode(e) {
  var keycode = e.keyCode;
  return keycode;
}
  </script>
</body>
</html>