jQuery・Javascript jQueryを使った小技やAjax非同期通信などについて

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

2014年7月24日
この記事は掲載から1218日経過しています。
情報が古い可能性が有りますのでご了承下さい

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

サンプル ダウンロード

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

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

テキストフォームの設定

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

解説

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

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

表示位置に関して

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

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

  • このエントリーをはてなブックマークに追加
  • LINEで送る

このカテゴリーのその他の記事

PAGE TOP