jQuery Keypad を使ってみた

キーボードがない環境での操作にも対応するため、ソフトウェアキーボードを実装することになったので、jQuery Keypad というものを使ってみました。 選定理由は一番簡単に導入できそうだったからです。 ダウンロード方法や使い方は以下で簡単に説明されていました。 - https://qiita.com/solabito331/items/f06d613c166e2bed2839 ## 表示/非表示用のボタンを用意 デフォルトではフォーカスした際に jQuery Keypad が表示されますが、キーボードで入力したい人にとっては邪魔だと思うので、jQuery Keypad 表示用のボタンを用意し、必要な人だけが表示できるようにしてみました。 具体的には、`showOn` を空文字にし、表示ボタンを押したときに表示するようにしています。 また、表示ボタンを連打するとテンキーが表示されたまま閉じれなくなってしまったので、ボタンの連打対策だけしておきました。 以下サンプルコードです。 ```html <input id="inputKeypad" type="text"><button type="button" onclick="showKeypad">表示</button>``` ```js $('#inputKeypad').keypad({ showOn: '', showAnime: 'blind', duration: 'fast', keypadOnly: false, }); ``` ```js var keypadFlag = false; function showKeypad(){ if (!keypadFlag) { keypadFlag = true; // ボタン連打対策として、一定時間後にフラグを落とす setTimeout(function(){ keypadFlag = false; }, 500); if ($(".keypad-popup").css('display') == 'block') { // 表示されている場合の処理 // ※フォーカスが外れた時点で非表示になるので、明示的に非表示にしなくてもよい？ //$('#inputKeypad').keypad('hide') // Hide the keypad } else { // 非表示の場合の処理 $('#inputKeypad').keypad('show') // Show the keypad } } } ``` ## type="number" への対応 jQuery Keypad は `type="number"` の `input` には対応しておらず、キーを押したときの入力内容が思っていたような動作になりません。 そこで、`0～9` `+` `-` のボタンを独自で定義して無理矢理対応させました。 ```js // keypad は type="number" の input に対応していないため、数値ボタンをカスタムで追加して無理矢理対応する var customNumberKeys = [ ['ZERO', 'zero', 0], ['ONE', 'one', 1], ['TWO', 'two', 2], ['THREE', 'three', 3], ['FOUR', 'four', 4], ['FIVE', 'five', 5], ['SIX', 'six', 6], ['SEVEN', 'seven', 7], ['EIGHT', 'eight', 8], ['NINE', 'nine', 9] ]; customNumberKeys.forEach(customNumberKey => { $.keypad.addKeyDef(customNumberKey[0], customNumberKey[1], function (inst) { this.val(this.val() + String(customNumberKey[2])).focus(); }); }); $.keypad.addKeyDef('MINUS', 'minus', function (inst) { let val = Number(this.val()) if (val > 0) { this.val(val * -1).focus(); } }); $.keypad.addKeyDef('PLUS', 'plus', function (inst) { let val = Number(this.val()) if (val < 0) { this.val(val * -1).focus(); } }); $('#inputKeypad').keypad({ showOn: '', showAnime: '', duration: 'fast', keypadOnly: false, closeText: '閉じる', closeStatus: '', clearText: 'クリア', clearStatus: '', zeroText: '0', zeroStatus: '', oneText: '1', oneStatus: '', twoText: '2', twoStatus: '', threeText: '3', threeStatus: '', fourText: '4', fourStatus: '', fiveText: '5', fiveStatus: '', sixText: '6', sixStatus: '', sevenText: '7', sevenStatus: '', eightText: '8', eightStatus: '', nineText: '9', nineStatus: '', minusText: '-', minusStatus: '', plusText: '+', plusStatus: '', layout: [ $.keypad.SEVEN + $.keypad.EIGHT + $.keypad.NINE + $.keypad.CLOSE, $.keypad.FOUR + $.keypad.FIVE + $.keypad.SIX + $.keypad.CLEAR, $.keypad.ONE + $.keypad.TWO + $.keypad.THREE, $.keypad.MINUS + $.keypad.ZERO + $.keypad.PLUS ], }); ``` <div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1Rol_o3S0C_JnmWrCmGp_1bbtO6rwL84Seu2Qv7yuRIBL2wR4Oo053Pym_tiQFpNzrlsYIBrsQTk8uXNQiRT-owVF-R6XCB8z8S7-pCxzNQsVR1JS-AEY_78FcEQiu5A1hEBL2U4_NSs/s0/offset.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="193" data-original-width="233" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1Rol_o3S0C_JnmWrCmGp_1bbtO6rwL84Seu2Qv7yuRIBL2wR4Oo053Pym_tiQFpNzrlsYIBrsQTk8uXNQiRT-owVF-R6XCB8z8S7-pCxzNQsVR1JS-AEY_78FcEQiu5A1hEBL2U4_NSs/s0/offset.png"/></a></div> ※デザインは変更しています（後述） ## デザインの調整 デフォルトのデザインがちょっとダサいので、Bootstrap に合わせてちょっとだけ修正しました。 ```css /* キーパッド */ .keypad-popup { /* 線が太くて濃くてダサいので、bootstrap に合わせる */ border: 1px solid #dee2e6; } .keypad-special, .keypad-key { /* 線が太くて濃くてダサいので、bootstrap に合わせる */ border: 1px solid #dee2e6; /* border を細くしたので、ちょっとだけ広げる */ padding: 4px; } .keypad-close { /* bootstrap の success に合わせる */ background-color: #28a745; } .keypad-clear { /* bootstrap の danger に合わせる */ background-color: #dc3545; } .keypad-back { /* bootstrap の primary に合わせる */ background-color: #007bff; } .keypad-shift { /* bootstrap の info に合わせる */ background-color: #17a2b8; } .keypad-spacebar { /*デフォルトは 13.25em だけど、keypad-tab を 2em 大きくしたので、その分小さくする */ width: 11.25em; } .keypad-tab { /*デフォルトは 2em だけど小さいので大きくする*/ width: 4em; } /* キーパッド（独自追加分） */ .keypad-zero, .keypad-one, .keypad-two, .keypad-three, .keypad-four, .keypad-five, .keypad-six, .keypad-seven, .keypad-eight, .keypad-nine, .keypad-ten, .keypad-plus, .keypad-minus { /* keypad-key に合わせる */ width: 2em; } ``` <div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMRUaDNWZSeE7rX-kdzqhqhBOMH3tTjDBVWvwImRaTp6sSBhIqxUJvhi15Xc79zrVx80s73H3omux6RiVFjMREFZxHr0yBRXjiXfjcyfSVzN1IAp3_0vdAOQ_IpZr_tdFALNYnpgtZL_Y/s510/query.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" width="320" data-original-height="267" data-original-width="510" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMRUaDNWZSeE7rX-kdzqhqhBOMH3tTjDBVWvwImRaTp6sSBhIqxUJvhi15Xc79zrVx80s73H3omux6RiVFjMREFZxHr0yBRXjiXfjcyfSVzN1IAp3_0vdAOQ_IpZr_tdFALNYnpgtZL_Y/s320/query.png"/></a></div> ## vue.js で v-model と共存させる 私は部分的に vue.js を使っていますが、jQuery Keypad で入力した値が `v-model` でバインディングした変数に反映されていませんでした。 どうやら、この手の入力補助 UI を使う場合、`input` イベントを発火させないといけないようです。 とりあえず jQuery Keypad の `onClose` でイベントを発火するようにしたら上手くいきました。 ```js $('#inputKeypad').keypad({ showOn: 'focus', showAnime: 'blind', duration: 'fast', keypadOnly: false, onKeypress: null, onClose: function () { var evt = document.createEvent('HTMLEvents'); evt.initEvent('input', true, false); this.dispatchEvent(evt); } }); ``` 試していませんが、`onKeypress` で発火するようにすればリアルタイムで同期がとれそうです。 ## 参考 URL - https://qiita.com/solabito331/items/f06d613c166e2bed2839 - https://qiita.com/kawasima/items/d052d0f4565c7f0a7492 - https://chi-bd.hatenadiary.org/entry/20170723/1500796421