以前の回答の応用です。
この手のコードは
- [B] キーが押された時
- [F] キーが押された時
- [B], [F] キーが同時に押された時
でそれぞれ個別処理を作るよりは一定のルールに則ったHTMLでマークアップしてJavaScriptで自動的に判断させると汎用性が上がります。
こうすれば、[A], [B], [C] キーの同時押しなど、HTMLを書き換えればいくらでも応用できます。
<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&b">0</span></p>
<p>[B]. [F] キーを同時に押した回数(keydown): <span id="keydown-b&f">0</span></p>
<p>[A]. [B], [C] キーを同時に押した回数(keydown): <span id="keydown-a&b&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&b">0</span></p>
<p>[B]. [F] キーを同時に押した回数(keyup): <span id="keyup-b&f">0</span></p>
<p>[A]. [B], [C] キーを同時に押した回数(keyup): <span id="keyup-a&b&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 08:44