PCのブラウザでiPhoneやAndroidのようなパスワードフォームを実現するJavaScriptライブラリ「FormTools」

PCのブラウザでiPhoneやAndroidのようなパスワードフォームを実現するJavaScriptライブラリ「FormTools」

Posted at January 7,2014 1:23 AM
Tag:[form, JavaScript]

PCのブラウザでiPhoneやAndroidのように、直前に入力した文字が見えるパスワードフォームを実現するJavaScriptライブラリ「FormTools」を紹介します。

iPhoneやAndroidのようなパスワードフォーム

1.はじめに

PCのパスワード入力では、入力した瞬間に文字が黒丸でマスキングされてしまうので、入力文字の確認ができません。

PCのパスワードフォームのマスキング(入力文字が確認できない)
黒丸でマスキング

これにひきかえ、iPhone(iOS)やAndroidといったスマホのパスワード入力では、直前に入力した文字が表示されるようになっています。

パスワードの1文字目を入力
パスワードの1文字目を入力

パスワードの2文字目を入力(1文字目がマスキングされる)
パスワードの2文字目を入力

すべてのパスワードを入力してフォーカスをはずしたあと(すべてマスキング)
すべてのパスワードを入力してフォーカスをはずしたあと

本エントリーで紹介するJavaScriptライブラリを利用すれば、PCのブラウザでiPhoneやAndroidのパスワード入力のようなUIを実現することができるようになります。

ちなみに文字を削除するときもマスキングを1文字ずつ解除してくれます。

以下、基本的な設定方法です。動作はWindows + Firefox/Google Chromeで確認しています。

注:PCとiPhoneやAndroidでは利用環境が異なるので、iPhoneやAndroidのようなパスワードフォームのUIをPCに適用することの是非については利用者の判断にお任せします。

2.スクリプトのダウンロード

「FormTools」のページにアクセスしてformtools.zipをクリック。

FormToolsのページ

ダウンロードしたアーカイブを展開し、中にあるFormTools.jsを利用します。

3.基本設定

まず基本的な設定方法を紹介します。サンプルも用意しています。

サンプル1
サンプル1

FormTools.jsをscript要素で呼び出します。jQueryは不要です。

<script src="FormTools.js"></script>

パスワード用フォームの下にscript要素を追加し、その中でaddPasswordMasking()を呼び出せば完了です。

addPasswordMasking()のパラメータには、パスワード用フォームのID属性値を設定します。

<input type="password" id="password" name="password" />
<script>
FormTools.addPasswordMasking("#password");
</script>

jQueryを利用すればscript要素をまとめることができます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="FormTools.js"></script>
<script>
$(function(){
    FormTools.addPasswordMasking("#password");
});
</script>
<input type="password" id="password" name="password" />

4.パスワードを確認するチェックボックスをつける

パスワードを確認するためのチェックボックスを設置することも可能です。

入力中にマスクの解除は行われませんが、チェックボックスをチェックすれば、マスクされたパスワードの内容がすべて表示されます。

チェックボックスはJavaScriptライブラリで自動的に表示します。

サンプル2
サンプル2

設定方法は3項とほぼ同じで、addPasswordMasking()の代わりにaddShowPasswordCheckboxes()を呼び出します。

パラメータは3項と同様、パスワード用フォームのID属性値を設定します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="FormTools.js"></script>
<script>
$(function(){
    FormTools.addShowPasswordCheckboxes("#password");
});
</script>
<input type="password" id="password" name="password" />

5.注意事項

IMEで全角入力モードになっているとパスワードが入力できないようです。

また、素の設定でスマホから入力すると全角入力モードになってしまうようなので、実用的なレベルまで引き上げるにはもう一工夫必要かもしれません。

あとFormToolsには他の機能もあるので、色々調べてみるとよいでしょう。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)