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;

## 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/AVvXsEgAXyt5Sy1F-NNyTooqihC8KpyA5hLZR8prHCY8T4rOfB1ac5nuE4Gqd-oU-XWmxfuvyELQJIFG77KIT4yOZGgXYmTuO2gmoBSd_KEY1-Xdz_w2-GSFzoflgnlbQYlioqLuKXH0Sy-EWyU/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/AVvXsEgAXyt5Sy1F-NNyTooqihC8KpyA5hLZR8prHCY8T4rOfB1ac5nuE4Gqd-oU-XWmxfuvyELQJIFG77KIT4yOZGgXYmTuO2gmoBSd_KEY1-Xdz_w2-GSFzoflgnlbQYlioqLuKXH0Sy-EWyU/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;
}
```

## 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

へっぽこプログラマーの備忘録

2021/03/17

jQuery Keypad を使ってみた

Translate

Popular Posts

Labels

Blog Archive