jQueryで簡易的なテンキー・セキュリティソフトウエアキーボードを作る
会員ページのログイン認証で、パスワードの他に４桁程度の暗証番号を入力するフォームを見かけると思いますが、これの入力を物理キーボードからではなく、ソフトウエアキーボードから行う為のサンプルです。
スタイルシートとjsファイルの読み込み
1 2 3 | <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は自前で設置したものでもちろん構いません。
テキストフォームの設定
1 | <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を取得して可変にしても良いかも。
1 2 3 4 5 6 7 | /* * フォームをクリックしたとき */ $(document).on('click','.numerickeybord',function(){ var offset = $( this ).offset(); var top = Math.ceil(offset.top)+35; var left = Math.ceil(offset.left); |
いわゆるキーロガー対策ですね。テキストフォームをクリックする度に順番が変わりますので安心です。数値のみなので、クレジットカード番号の入力なんかにも使えるかもです。フルキーボードのjQueryライブラリは簡単に見つかったのですが、テンキーのみのライブラリは見つからなかったので作ってみました。
