[JS]フォームに入力したパスワードを可視化するスクリプト -Show Password

フォームに入力したパスワードをユーザーのボタンクリック操作で可視化するスクリプトを紹介します。

デモのキャプチャ

jQuery Show Password Plugin
デモページ

実装は既存のフォームにも簡単に組み込めます。

HTML

デモのHTMLはシンプルです。
可視化は、パスワードのclass名を参照しています。

CSS

CSSではフォームのスタイル以外に、可視化ボタンのスタイルをします。

JavaScript

jquery.jsと当スクリプトを外部ファイルにし、下記のスクリプトを記述します。
パスワードに記述したclass名を指定します。任意のものも使用できます。

スクリプトのオプションでは、可視化ボタンのclass名、表示・非表示、表示位置などが指定できます。

sponsors

top of page

©2024 coliss