ソフトウェアキーボード「jQuery Keypad」を使用してみる

はじめに

お仕事にてClassic aspで作成された既存アプリケーションをBlazor Serverに作り替える作業をしています。
このアプリケーションには、ガラケーの文字入力を模したソフトウェアキーボード(1キーで3文字割り当て)が作成されておりました。
これをBlazorで一から作成し直すのは面倒だしコストも掛かります。現在の使用状況を調べたら、3年前を最後に使用されていないようでした。
実質オマケ的な感じでもあればいい状況です。

そこで見つけたのが、ソフトウェアキーボード「jQuery Keypad」でキーのカスタマイズ可能です。

環境

ライブラリー	バージョン
jQuery.min.js	3.7.1
jquery.plugin.min.js	-
jquery.keypad.min.js	2.1.1

準備

jQuery Keypad 2.1.1のCDNが見当たらなかったため、暫定的に下記サイトを参考に rawgithub.com を使用しています。

CodePen

インライン向けの英大文字と数字とハイフン入力、数値入力の2パターンを作成しました。

余分な記号がないのは、仕様です。

キーボードが表示されない場合、この記事をリロードしてください。

See the Pen jQuery Keypad CharacterInput by やじゅ (@yaju-the-encoder) on CodePen.

BlazorでもBoostrapフレームワークを使用しているため、下記サイトのCSSを参考にさせていただきました。

工夫点

数値入力で、+/-のところを工夫しました。
何も入力がなければ、-を表示、負数の場合に+/-を押すと正数に、正数の場合に+/-を押すと負数に切り替わります。

$.keypad.addKeyDef('MINUS', 'minus', function (inst) {
  let val = Number(this.val())
  if (val != 0 && !isNaN(val))
    this.val(val * -1).focus();
  else if (this.val().length == 0)
    this.val('-').focus();
});

最後に

jQuery Keypadの日本の記事は少ないですね。
カスタマイズ可能なソフトウェアキーボードを作成するには便利ですよ。

次回の記事では、これをBlazorで使用できるようにしていきます。

参照サイト