html キー離した時の処理

satoshi501

総合スコア60

0グッド

1クリップ

投稿2016/06/22 06:54

お世話になります。
現在HTMLでキーボードで押したボタンによって処理を分岐するプログラムを作成しています。

先日こちらのサイトでキーの同時押しについて教えて頂きましたが、
今度はその同時押しから片方だけを離した時の処理などを教えて頂きたいです。

<html>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <head>
        <script type="text/javascript">
            <!--
            var press1 = 0;
            var press2 = 0;
            var press3 = 0;
            document.onkeydown = pressFunction;
            document.onkeyup = releaseFunction;
            var keyStatus = {};
            
            // キーを押されたら実行する処理
            function pressFunction(e)
            {
   
                keyStatus[e.keyCode] = true; // 該当のキーコードをtrueにする
                if(keyStatus[66] && keyStatus[70]) { // BとF両方trueなら
                    document.getElementById("key1").innerHTML = ++press3;
                }
            }
        // キーが離されたら実行する処理
        function releaseFunction(e)
        {
            keyStatus[e.keyCode] = false; // 該当のキーコードをfalseにする
        }
                //-->
            </script>
    </head>
    <body>
        key1: <span id="key1"></span>回;<br>
        key2: <span id="key2"></span>回;<br>
        key3: <span id="key3"></span>回;<br>
    </body>
</html>

上記の状態でBとFを同時に押すとkey1の値が増えていきます。

現在知りたいのはその状態からBだけを離したらkey2がカウントされていく処理です。

onkeyupの処理になるのかわかりませんが、他の擬似的なやり方があるのでしたら是非教えて頂きたいです。
（例えばループ処理などで今何のキーが押されているか１秒ごとに監視することができるのであれば、おそらく上記のif文にBを押した時の処理をを加えればいいのでしょうか）

よろしくお願いいたします。

行動規範の内容に同意します

回答2件

ベストアンサー

こんな感じですか？動確してないので動かなかったらすみません。

javascript
1function releaseFunction(e)
2{
3    // 現在BとF両方押されている状態でBが離されたら
4    if (keyStatus[66] && keyStatus[70] && e.keyCode==66) {
5        // key2のカウント処理
6    } 
7    keyStatus[e.keyCode] = false; // 該当のキーコードをfalseにする
8}

投稿2016/06/22 07:10

k.tada

総合スコア1679

satoshi501

2016/06/22 08:44

ありがとうございます！おかげさまで実行できました

行動規範の内容に同意します

以前の回答の応用です。
この手のコードは

[B] キーが押された時
[F] キーが押された時
[B], [F] キーが同時に押された時

でそれぞれ個別処理を作るよりは一定のルールに則ったHTMLでマークアップしてJavaScriptで自動的に判断させると汎用性が上がります。
こうすれば、[A], [B], [C] キーの同時押しなど、HTMLを書き換えればいくらでも応用できます。

複数キーの同時押下を検出する - JSFiddle

<h1>複数キーの同時押下を検出する</h1>

<h2>keydown</h2>
<p>[A] キーを押した回数(keydown): <span id="keydown-a">0</span></p>
<p>[B] キーを押した回数(keydown): <span id="keydown-b">0</span></p>
<p>[F] キーを押した回数(keydown): <span id="keydown-f">0</span></p>
<p>[A]. [B] キーを同時に押した回数(keydown): <span id="keydown-a&amp;b">0</span></p>
<p>[B]. [F] キーを同時に押した回数(keydown): <span id="keydown-b&amp;f">0</span></p>
<p>[A]. [B], [C] キーを同時に押した回数(keydown): <span id="keydown-a&amp;b&amp;c">0</span></p>

<h2>keyup</h2>
<p>[A] キーを押した回数(keyup): <span id="keyup-a">0</span></p>
<p>[B] キーを押した回数(keyup): <span id="keyup-b">0</span></p>
<p>[F] キーを押した回数(keyup): <span id="keyup-f">0</span></p>
<p>[A]. [B] キーを同時に押した回数(keyup): <span id="keyup-a&amp;b">0</span></p>
<p>[B]. [F] キーを同時に押した回数(keyup): <span id="keyup-b&amp;f">0</span></p>
<p>[A]. [B], [C] キーを同時に押した回数(keyup): <span id="keyup-a&amp;b&amp;c">0</span></p>

<script type="text/javascript">
'use strict';
function sortfn (a, b) {
  return a - b;
}

function incrementSpanText (type, keyCode, keyCodes, doc) {
  var element = doc.getElementById(type + '-' + String.fromCharCode(keyCode).toLowerCase()),
      keyChars = [];

  if (element) {
    ++element.firstChild.data;
  }

  keyCodes.sort(sortfn);

  for (var i = 0, l = keyCodes.length; i < l; ++i) {
    keyChars.push(String.fromCharCode(keyCodes[i]).toLowerCase());
  }

  element = doc.getElementById(type + '-' + keyChars.join('&'));

  if (element) {
    ++element.firstChild.data;
  }
}

function handleKeydownUp (event) {
  var keyCode = event.keyCode,
      keyCodes = this.keyCodes,
      i = keyCodes.indexOf(keyCode);

  switch (event.type) {
    case 'keydown':
      if (i === -1) {
        keyCodes.push(keyCode);
      }

      incrementSpanText(event.type, keyCode, keyCodes, event.target.ownerDocument);
      break;
    case 'keyup':
      incrementSpanText(event.type, event.keyCode, keyCodes, event.target.ownerDocument);
      keyCodes.splice(i, 1);
      break;
  }

  console.log(event.type, JSON.stringify(keyCodes))
}

var listener = {keyCodes: [], handleEvent: handleKeydownUp};
document.addEventListener('keydown', listener, false);
document.addEventListener('keyup', listener, false);
</script>

Re: satoshi501 さん

投稿2016/06/22 07:52

編集2016/06/22 07:58