HTML キーの同時押し

お世話になります。

HTMLでパソコンのキーボードから押したボタンによって動作が分岐する機能を作成しています。

現在上記のプログラムはできたのですが、更にキーを同時に押した場合の処理も行いたいと思っているのですがうまくいきません。

すいませんがご教授お願い致します。

現在のソース

<html>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <head>
        <script type="text/javascript">
            <!--
            var press1 = 0;
            var press2 = 0;
            document.onkeydown = testfunction;
            
            function testfunction()
            {
                if (event.keyCode == 66)  //「Ｂ」が押されたか確認
                {
                    document.getElementById("key1").innerHTML = ++press1;
                }
                if (event.keyCode == 70)  //「Ｆ」が押されたか確認
                {
                     document.getElementById("key2").innerHTML = ++press2;
                }
            }
        //-->
            </script>
    </head>
    <body>
        key1: <span id="key1"></span>回;<br>
        key2: <span id="key2"></span>回;<br>
    </body>
</html>

BとFを同時に押した場合に回数が増えるようにしたいです。

takito

2016/06/21 07:30

具体的に何がうまくいっていないのでしょうか？「BとFを同時に押した場合に回数が増えるようにしたいです」ということは、「ＢかＦのどちらか一方だけが押されている場合は回数が増えない」ということでしょうか？

satoshi501

2016/06/21 08:33

返答ありがとうございます。とりあえず今回はBとFを同時に押した際の処理を行いたいです。ですので、サンプルで書いたBとFの単体の機能はなくても問題ないです。

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

回答2件

ベストアンサー

Bが押された状態、Fが押された状態を変数で保持しておき、両方がtrueになったときに処理するようにしましょう。参考のコードをjsFiddleで作成しました。
https://jsfiddle.net/yxr5u1cL/

Javascript
1var press1 = 0;
2var press2 = 0;
3var press3 = 0;
4document.onkeydown = pressFunction;
5document.onkeyup = releaseFunction;
6var keyStatus = {};
7
8// キーを押されたら実行する処理
9function pressFunction(e)
10{
11  if(e.keyCode == 66)  //「Ｂ」が押されたか確認
12  {
13    document.getElementById("key1").innerHTML = ++press1;
14  }
15  if (e.keyCode == 70)  //「Ｆ」が押されたか確認
16  {
17    document.getElementById("key2").innerHTML = ++press2;
18  }
19  
20  keyStatus[e.keyCode] = true; // 該当のキーコードをtrueにする
21  if(keyStatus[66] && keyStatus[70]) { // BとF両方trueなら
22    document.getElementById("key3").innerHTML = ++press3;
23  }
24}
25// キーが離されたら実行する処理
26function releaseFunction(e)
27{
28  keyStatus[e.keyCode] = false; // 該当のキーコードをfalseにする
29}

投稿2016/06/21 07:31

masaya_ohashi

総合スコア9210

satoshi501

2016/06/21 08:43

このやり方でうまく実行でき、また理解もできました。ありがとうございました。

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

keydown 時に keyCode をキャッシュし、keyup 時に該当 keyCode をクリアします。

[B], [F] キー同時押下を検出 - JSFiddle

JavaScript
1'use strict';
2function handleKeydownUp (event) {
3  var keyCode = event.keyCode,
4      keyCodes = this.keyCodes,
5      i = keyCodes.indexOf(keyCode);
6
7  switch (event.type) {
8    case 'keydown':
9      if (i === -1) {
10        keyCodes.push(keyCode);
11      }
12
13      if (keyCodes.indexOf(66) !== -1 && keyCodes.indexOf(70) !== -1) {
14        console.log('B and F');
15      }
16      break;
17    case 'keyup':
18      keyCodes.splice(i, 1);
19      break;
20  }
21
22  console.log(event.type, JSON.stringify(keyCodes))
23}
24
25var listener = {keyCodes: [], handleEvent: handleKeydownUp};
26document.addEventListener('keydown', listener, false);
27document.addEventListener('keyup', listener, false);