【jQuery】ソフトウェアキーボードを導入してみる

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

#想定している動作
　・コンボボックスではなくテキストボックスにする。
　・テキストボックスをクリックするとソフトウェアキーボードが出る。
　・ソフトウェアキーボードのボタンを押すと入力できる。外からキーボードでの入力はできない。
　・「10」とか「ABCD」とかのような文字列でもボタン一つで入力できる。
#見つけたプラグイン
　検索してプラグインとして使えるものはないかを探してみたら、このようなものを発見。これを今回導入してみた。
[jQuery Keypad ＊英語サイト](http://keith-wood.name/keypad.html)
#実装方法
##ダウンロードとソースの利用
　サイト内の「Download now」のボタンでソースをダウンロードできる。
　jQueryを下のようにして取り入れる。(jQueryのバージョンは1.7以降で。)

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

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

```html
<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>
```

##とりあえず表示させてみる
　ソース全体としてはこんな感じ。

```html: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で表示)
　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261325/bc496c51-9629-b46a-abba-6b641167a66a.png)

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

|キー|デフォルト|説明|
|:---------|:------------------------------------------|:--------------|
|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までのボタンが出るもの。

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261325/9127bb4a-96d3-1eac-785a-c54c47e90520.png)
　英数字でパスワードを打ちたいというような時は、次の例のように書くとフルのキーボードが出る。

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261325/1f4bcd9c-9f26-9db2-89f8-bbdf268cc22c.png)