JavaScript]PCのブラウザでiPhoneやAndroidのように、直前に入力した文字が見えるパスワードフォームを実現するJavaScriptライブラリ「FormTools」を紹介します。1.はじめにPCのパスワード入力では、入力した瞬間に文字が黒丸でマスキングされてしまうので、入力文字の確認ができません。PCのパスワードフォームのマスキング(入力文字が確認できない)これにひきかえ、iPhone(iOS)やAndroidといったスマホのパスワード入力では、直前に入力した文字が表示されるようになっています。パスワードの1文字目を入力パスワードの2文字目を入力(1文字目がマスキングされる)すべてのパスワードを入力してフォーカスをはずしたあと(すべてマスキング)本エントリーで紹介するJavaScriptライブラリを利用すれば、PCのブラウザでiPhoneやAndroidのパスワード入力のようなUIを実現することができるようになります。ちなみに文字を削除するときもマスキングを1文字ずつ解除してくれます。以下、基本的な設定方法です。Chromeで確認しています。注:PCとiPhoneやAndroidでは利用環境が異なるので、iPhoneやAndroidのようなパスワードフォームのUIをPCに適用することの是非については利用者の判断にお任せします。2.スクリプトのダウンロード「FormTools」のページにアクセスしてformtools.zipをクリック。ダウンロードしたアーカイブを展開し、中にあるFormTools.jsを利用します。3.基本設定まず基本的な設定方法を紹介します。サンプルも用意しています。サンプル1FormTools.jsをscript要素で呼び出します。jQueryは不要です。src="FormTools.js"></script>パスワード用フォームの下にscript要素を追加し、その中でaddPasswordMasking()を呼び出せば完了です。addPasswordMasking()のパラメータには、パスワード用フォームのID属性値を設定します。/><script>FormTools.addPasswordMasking("#password");</script>jQueryを利用すればscript要素をまとめることができます。/>4.パスワードを確認するチェックボックスをつけるパスワードを確認するためのチェックボックスを設置することも可能です。入力中にマスクの解除は行われませんが、チェックボックスをチェックすれば、マスクされたパスワードの内容がすべて表示されます。チェックボックスはJavaScriptライブラリで自動的に表示します。サンプル2設定方法は3項とほぼ同じで、addPasswordMasking()の代わりにaddShowPasswordCheckboxes()を呼び出します。パラメータは3項と同様、パスワード用フォームのID属性値を設定します。/>5.注意事項IMEで全角入力モードになっているとパスワードが入力できないようです。素の設定でスマホから入力すると全角入力モードになってしまうようなので、実用的なレベルまで引き上げるにはもう一工夫必要かもしれません。あとFormToolsには他の機能もあるので、色々調べてみるとよいでしょう。*必須(非表示)URL(U):情報を保存する?コメントへの返信ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。すべてのご質問にはお答えできない可能性があります。Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。