コンボボックスで選択するにしも、数が10個以上とかになってくると扱いにくくなることもある。そこで、ソフトウェアキーボードの導入を考えてみた。

想定している動作

　・コンボボックスではなくテキストボックスにする。
　・テキストボックスをクリックするとソフトウェアキーボードが出る。
　・ソフトウェアキーボードのボタンを押すと入力できる。外からキーボードでの入力はできない。
　・「10」とか「ABCD」とかのような文字列でもボタン一つで入力できる。

見つけたプラグイン

　検索してプラグインとして使えるものはないかを探してみたら、このようなものを発見。これを今回導入してみた。
jQuery Keypad ＊英語サイト

実装方法

ダウンロードとソースの利用

　サイト内の「Download now」のボタンでソースをダウンロードできる。
　jQueryを下のようにして取り入れる。(jQueryのバージョンは1.7以降で。)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

ダウンロードしたソースは下のようにして使えるようにする。(サイトにあるものをそのまま抜粋したものなので、src属性はどこに置いたかで変わるよ。)

<link type="text/css" href="css/jquery.keypad.css" rel="stylesheet"> 
<script type="text/javascript" src="js/jquery.plugin.js"></script> 
<script type="text/javascript" src="js/jquery.keypad.js"></script>

とりあえず表示させてみる

　ソース全体としてはこんな感じ。

test.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ソフトウェアキーボードテスト</title>
        <link href="./js/jquery.keypad.package-2.1.1/css/jquery.keypad.css" rel="stylesheet">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="./js/jquery.keypad.package-2.1.1/js/jquery.plugin.js"></script>
        <script src="./js/jquery.keypad.package-2.1.1/js/jquery.keypad.js"></script>
        <script>
            $(function () {
              //$(' ')の中身はソフトウェアキーボードを表示させたいid
              $('#softwareKeyboard').keypad({
                //ここでオプションを付けてカスタマイズできる
                });
            });
        </script>
    </head>
    <body>
        ソフトウェアキーボードテストページ
        <input type="text" name="test" id="softwareKeyboard">
    </body>
</html>

実装した結果はこんな感じで出る。(Google Chromeで表示)
　

オプション

　コード内の「ここでオプションを付けてカスタマイズできる」の所で、色々カスタマイズができる。

キー	デフォルト	説明
showOn	focus	キーボードを出すときの手段。"focus"でテキストボックスにフォーカスを当てた時。"button"でボタンを押したとき。"both"は両方。
showAnim	show	キーボードを出すアニメーション。サイトのInvocationタブの一番下でサンプルがあるので、そこを見よう。
duration	normal	キーボードを出す速さ。"slow"と"normal"と"fast"の中から選ぶ。
appendText	(空文字列)	テキストボックスの右側に書く文字列。
prompt	(空文字列)	キーボードの上の方に書く文字列。
layout	(省略)	どのようなキーを設置するかを文字列型の配列で指定する。1要素で1行になる。(詳細を後述)
separator	(空文字列)	layoutで区切り文字を指定する。(詳細を後述)
keypadOnly	false	外からキーボードで入力できないようにするかどうか。trueでソフトウェアキーボードのみの入力となる。
randomiseAlphabetic	false	trueだと、layoutを$.keypad.qwertyAlphabeticにした時にランダムなキー配列となる。パスワード入力で利用できそう？
randomiseNumeric	false	trueだと、テンキーにした時にランダムなキー配列となる。パスワード入力で利用できそう。
beforeShow	null	キーボードを出す直前の処理。
onKeypress	null	キーを押したときの処理。
onClose	null	キーボードを閉じる時の処理。

layout,separator

　layoutは配列を用いて何を入力するボタンにするかを指定できる。1つの要素で1行分となる。
　separatorは区切り文字で、この区切り文字ごとに1行内でボタンが分かれる。
　なお、上のCLOSEなどのボタンは$.keypad.CLOSEなどを指定すればよい。
　下の例はテレビのリモコンみたいに1～12までのボタンが出るもの。

$('#softwareKeyboard').keypad({
    layout:["1|2|3","4|5|6","7|8|9","10|11|12", $.keypad.CLOSE],
    separator:"|"
});

　英数字でパスワードを打ちたいというような時は、次の例のように書くとフルのキーボードが出る。

$('#softwareKeyboard').keypad({
    layout:$.keypad.qwertyLayout
});