【Javascriptライブラリ】キーイベント発生時に関数を実行する「keyos.js」を作ってみました。

どうも、パンジェンシーでございます。

今回も、自分が作成したライブラリの紹介です。

Webアプリを作っていると、キーボードでユーザーが何か入力した時に、何かしらの関数を実行するようにしたいということが多々あると思います。

しかし、いざ使おうとすると、キーコードを調べたり、テキスト入力フォームにユーザーが入力中にも反応してしまい、フラグを立てるとか、色々面倒くさいです。

なので、そこを簡単にやってくれるライブラリ
「keyos(キーオス).js」を作成してみました。 ====

 

コード

keyos.js

※2015/8/25
・Enterとテンキーに対応しました。
・some()関数追加。callbackで押されたキー名を取得できるようにしました。

// keyoshita.js
/* example
    var key = keyoshita();
    key.on("keyup","a",function(){
        alert("a oshita!");
    });

    key.on("keypress","↓",function(){
        ("↓");
    });
*/
var keyos = function() {
    var DEBUG = 0;
    var ACCEPT_KEY_INPUT = 1;
    var eventList = ['keyup', 'keypress'];
    var keyCodeList_keyup = {
        13: 'Enter',
        37: '←',
        38: '↑',
        39: '→',
        40: '↓',
        65: 'a',
        66: 'b',
        67: 'c',
        68: 'd',
        69: 'e',
        70: 'f',
        71: 'g',
        72: 'h',
        73: 'i',
        74: 'j',
        75: 'k',
        76: 'l',
        77: 'm',
        78: 'n',
        79: 'o',
        80: 'p',
        81: 'q',
        82: 'r',
        83: 's',
        84: 't',
        85: 'u',
        86: 'v',
        87: 'w',
        88: 'x',
        89: 'y',
        90: 'z',
        48: '0',
        49: '1',
        50: '2',
        51: '3',
        52: '4',
        53: '5',
        54: '6',
        55: '7',
        56: '8',
        57: '9',
        96: '0',
        97: '1',
        98: '2',
        99: '3',
        100: '4',
        101: '5',
        102: '6',
        103: '7',
        104: '8',
        105: '9',
        190: '.',
        188: ',',
    };
    var keyCodeList_keypress = {
        48: '0',
        49: '1',
        50: '2',
        51: '3',
        52: '4',
        53: '5',
        54: '6',
        55: '7',
        56: '8',
        57: '9',
        97: 'a',
        98: 'b',
        99: 'c',
        100: 'd',
        101: 'e',
        102: 'f',
        103: 'g',
        104: 'h',
        105: 'i',
        106: 'j',
        107: 'k',
        108: 'l',
        109: 'm',
        110: 'n',
        111: 'o',
        112: 'p',
        113: 'q',
        114: 'r',
        115: 's',
        116: 't',
        117: 'u',
        118: 'v',
        119: 'w',
        120: 'x',
        121: 'y',
        122: 'z',
        46: '.',
        44: ',',
    };
    var handler = {};
    handler.keyup = {};
    handler.keypress = {};
    var some = {};
    some.keyup = function() {};
    some.keypress = function() {};

    function log(text) {
        if (DEBUG) {
            console.log(text);
        }
    }

    document.getElementsByTagName('body')[0].addEventListener('keyup', function(event) {
        if (ACCEPT_KEY_INPUT) {
            event.preventDefault();
            log("keyup:" + event.keyCode);
            var key = keyCodeList_keyup[event.keyCode];
            if (handler.keyup[key]) {
                log("keyup:" + key);
                handler.keyup[key]();
            } else {
                log("handler is not registered.");
            }
            if (some.keyup) {
                some.keyup(key);
            }
        }
    });

    document.getElementsByTagName('body')[0].addEventListener('keypress', function(event) {
        if (ACCEPT_KEY_INPUT) {
            event.preventDefault();
            log("keypress:" + event.keyCode);
            var key = keyCodeList_keypress[event.keyCode];
            if (handler.keypress[key]) {
                log("keypress:" + key);
                handler.keypress[key]();
            } else {
                log("handler is not registered.");
            }
            if (some.keypress) {
                some.keypress(key);
            }
        }
    });

    return {
        on: function(event, key, callback) {
            if (handler[event]) {
                handler[event][key] = callback;
            } else {
                log('指定されたイベントには対応していません');
            }
        },
        some: function(event, callback) {
            if (some[event]) {
                some[event] = callback;
            } else {
                log('指定されたイベントには対応していません');
            }
        },
        accept: function() {
            ACCEPT_KEY_INPUT = 1;
        },
        refuse: function() {
            ACCEPT_KEY_INPUT = 0;
        }
    };
};

テスト用のページは以下です。
test.html

<!doctype html>
<html lang='ja'>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>keyos test</title>
</head>

<body>
</body>
<script src="keyos.js"></script>
<script>
//**********************************************
// keyos(キーオス).jsは、キーイベントを
// 簡単に扱うためのライブラリです
//**********************************************

var key = keyos();
// まず、keyosオブジェクトを作成します。

key.on("keyup", "e", function() {
  alert("e oshita!");
});
// on()で、キーイベント発生時に実行する
// 関数を登録できます。
// イベントは、"keyup"と"keypress"に
//  対応させています。
// キーは、
// 方向キー,a-z,0-9,".",","に対応しています。
// 他のキーにも対応させたい場合は、ライブラリに
// キーコードを追加してください。

key.on("keypress", "↓", function() {
  console.log("↓");
});

key.on("keyup", "r", function() {
  key.refuse();
  // refuse()をすると、キーイベント発生時に
  // 登録した関数が実行されなくなります
  // accept()をすると、実行される状態に戻ります。
});
</script>

</html>

まとめ

今回は、キーイベントのコールバックを簡単に設定できるライブラリを紹介しました。

誰かのお役に立てれば幸いです。

ではまた。