jQueryで簡易的なテンキー・セキュリティソフトウエアキーボードを作る

会員ページのログイン認証で、パスワードの他に４桁程度の暗証番号を入力するフォームを見かけると思いますが、これの入力を物理キーボードからではなく、ソフトウエアキーボードから行う為のサンプルです。

サンプル　ダウンロード

スタイルシートとjsファイルの読み込み

<link href="numerickey.css" rel="stylesheet" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="numerickey.js"></script>

※jQueryは自前で設置したものでもちろん構いません。

テキストフォームの設定

<input type="text" name="number" id="number1" class="numerickeybord" readonly="readonly">

readonly=”readonly”を設定する事と、classをnumerickeybordとして下さい。idは必須で、複数設置する場合はidの値が被らないようにして下さい。

解説

テキストフォームをクリックすると、数字/a~z のボタンが表示されますので、マウスでクリックするか横のa~zのキーを押す事で数値が入力されます。

IE6以上で動作しますが、IE6はキー配列がカラム落ちします(^-^; IE6のfloat対策方法があった記憶もあるのですが、最近はIE6無視してるので忘れてしまい・・気になる方はCSS変更して下さい。

表示位置に関して

テキストフォームの位置から35px分、下に表示していますが、位置が気になる方は以下を調整して下さい。heightを取得して可変にしても良いかも。

/*
 * フォームをクリックしたとき
 */
    $(document).on('click','.numerickeybord',function(){
      var offset = $( this ).offset();
      var top  = Math.ceil(offset.top)+35;
      var left = Math.ceil(offset.left);

いわゆるキーロガー対策ですね。テキストフォームをクリックする度に順番が変わりますので安心です。数値のみなので、クレジットカード番号の入力なんかにも使えるかもです。フルキーボードのjQueryライブラリは簡単に見つかったのですが、テンキーのみのライブラリは見つからなかったので作ってみました。