jQueryでスクリーンキーボード

動機

• Webアプリケーション内で、マウスだけで簡単なキーボード入力がしたい
• Windows標準のスクリーンキーボードはでかいし、クライアント全部に設定して回るのはしんどい
• QWERTY配列に苦手意識を覚える層のユーザーも居る
• せっかくjQueryとBootstrapを使っているので、なんとかならんのか

そういうわけで調べてみると、Keyboard(Git Hub)ってのがあるらしい。これ使おう。

インストール

公式サイトとかググればいくらでも出てくる

カスタマイズ

デフォルトではQWERTY配列のスクリーンキーボードしか出ないので、自分でアルファベット順のものを作る。

key.js

    $(function(){
        $('#input')
                .keyboard({
                        layout: 'custom',
                        customLayout: {
                                'normal' : [
                                        '1 2 3 4 5 6 7 8 9 0',
                                        'A B C D E F G H I J',
                                        'K L M N O P Q R S T',
                                        'U V W X Y Z - {bksp}',
                                        '{a} {c}',
                                ]
                        },
                        // Prevent keys not in the displayed keyboard from being typed in
                        restrictInput : true,
                        // don't use combos or A+E could become a ligature
                        useCombos : false,
                })
                .addTyping();
    });

出力

個人的には使いにくいと思うけど、QWERTY配列慣れていない人には便利かな？