LANG SELRCT

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

2018年9月17日月曜日

キーを押して放したことを検知したい


デモ command, shift, control, 4に対応

左からtrue/false キー キーコードの順

command:91
shift:16
control:17
num4:52

4以外のキーの同時押しには反応する
最後に4を加えると反応しなくなる(ここは未解決)


関連記事


前提
command + shift + control + 4
を同時に押して
選択した範囲をスクリーンショットに撮ると
クリップボードに保存される
Macでスクリーンショットを撮ってクリップボードに保存する


やりたいこと(未完)
command + shift + control + 4を同時に押して放した時に
クリップボードのデータを取得したい

と思って作ってみたらできなかったという話。
おそらく方法はあるのだろうけど、深そうなので追うのはやめました。


できたところまでのコードを残しておきます。

最後の「4」を押した時にkeydownで検知できないという壁がありました。
「4」単体であれば押した時に検知できるが上記でのキーを組み合わせたときには検知できなくなる。




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




index.html
<!DOCTYPE html>
<html>
  <body>
    <label id="cmd">false</label>command:91
    <br>
    <label id="sht">false</label>shift:16
    <br>
    <label id="ctrl">false</label>control:17
    <br>
    <label id="num4">false</label>num4:52
    <br>
    <script>
/************************************
イベント
************************************/
document.onkeydown = function(e) { down_up_keycode(e,"down")};
document.onkeyup = function(e) { down_up_keycode(e, "up")};
document.onmouseup = mouse_up;

/************************************
mouse_up
************************************/
function mouse_up(){
  var ids = get_key_values();
  var result = get_text_content(ids)
}

function get_text_content(ids){
  var result;
  for(var i = 0; i < ids.length; i++){
    result = elem(ids[i]).textContent;
    if(result !== "true"){
      break;
    }
  }
}

/************************************
down_up_keycodey
************************************/
function down_up_keycode(e, flag){
  var keycode = get_keycode(e);
  switch(flag){
    case "down":
      down_case(keycode);
      break;
    case "up":
      up_case(keycode);
      break;
  }
}

/************************************
down_case
************************************/
function down_case(keycode){
  elem(key_obj[keycode]).textContent = true;
}

/************************************
up_case
************************************/
function up_case(keycode){
  elem(key_obj[keycode]).textContent = false;
    if(keycode === 52){
    alert("4が押されました");
  }
}

/************************************
key_obj
************************************/
var key_obj = {
  91: "cmd",
  16: "sht",
  17: "ctrl",
  52: "num4"
}

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

/************************************
get_keycode
************************************/
function get_keycode(e){
  var keycode = e.keyCode;
  return keycode;
}

/************************************
get_key_values
************************************/
function get_key_values() {
  var keys = Object.keys(key_obj);
  var values = [];
  for (var i = 0; i < keys.length; i++) {
    var value = key_obj[keys[i]];
    values.push(value);
  }
  return values;
}
</script>
  </body>
</html>