addholdkeyeventlistener.js: 同時に入力されたキー一覧を取得するイベントリスナ(addEventListener 互換)

ReadMe.md

addholdkeyeventlistener.js

概要

キーボードからキー入力する場合、キーを押して(keydown)した後にキーを離して(keyup)、キー入力を確定させます。 この仕組みを踏まえ、keyup の瞬間に同時に入力されているキー全てを取得するイベントリスナを実現します。

使い方

"addholdkeyeventlistener.js" を外部スクリプトとして読み込めば、第一引数にDOMノードを指定する以外は addEventListener と同等の感覚で使えます。

• 第一引数 … ノード(node)
• 第二引数 … イベントハンドラ関数(eventHandler) 又は イベントリスナーオブジェクト(lisetener)
• 第三引数 … キャプチャリングフェーズを使用するか(useCapture)

<script src="addholdkeyeventlistener.js"></script>
<script>
addHoldKeyEventListener(document, function (event) {
  var keyCodes = event.keyCodes;

  if (keyCodes.length === 1 & keyCodes[0] === 13) { // 同時に入力されたキーが [Enter] だけの場合
    console.log(keyCodes[0]);
  }
  }
  }
}, false);
</script>

addEventListener と同様、第二引数にイベントリスナーオブジェクトを指定することが出来ます。

addHoldKeyEventListener(document, {i: 0, handleEvent: function (event) {
  var keyCodes = event.keyCodes;

  if (keyCodes.length === 1 & keyCodes[0] === 13) { // 同時に入力されたキーが [Enter] だけの場合
    console.log(++this.i, keyCodes[0]);
  }
}}, false);

addholdkeyeventlistener.js

/**
 * addholdkeyeventlistener.js
 * list up the hold key List by addEventListener.
 *
 *
 * @version 1.0.0
 * @author think49
 * @url https://gist.github.com/think49/e53091b12791eabad03625fd08b52680
 * @license http://www.opensource.org/licenses/mit-license.php (The MIT License)
 */

var addHoldKeyEventListener = (function () {
  'use strict';
  function handleKeydownup (event) {
    var keyCodes = this.keyCodes;

    switch (event.type) {
      case 'keydown':
        var keyCode = event.keyCode;

        if (keyCodes.indexOf(keyCode) === -1) {
          keyCodes.push(keyCode);
        }
        break;
      case 'keyup':
        var listener = this.listener;

        if (typeof listener === 'function') {
          listener.call(event.currentTarget, {type: 'keyhold', keyCodes: keyCodes})
        } else if (typeof listener.handleEvent === 'function') {
          listener.handleEvent({type: 'keyhold', keyCodes: keyCodes});
        }

        keyCodes.splice(keyCodes.indexOf(event.keyCode), 1);
        break;
    }
  }

  return function addHoldKeyEventListener (node, listener, useCapture) {
    var _listener = {handleEvent: handleKeydownup, listener: listener, keyCodes: []};
    node.addEventListener('keydown', _listener, useCapture);
    node.addEventListener('keyup', _listener, useCapture);
  };
}());