テスト - パスワードの誤入力を減らす3

■動作サンプル

※適用

※未適用

■使い方

ZIPファイルを解凍後(中身はpasswordTextExtension.jsとアイコン画像のセット)、各ファイルを任意のディレクトリに配置し、
本機能を実装したいhtmlでJSファイルを読み込む。

<script type="text/javascript" src="js/passwordTextExtension.js"></script>

本JSを適用したいinput要素(type="password")のクラスに「pwdExt」を指定する。
(指定するクラス名はjsファイルの設定値で任意に変更可能)
この時、input要素には必ずid属性を指定する。

<input type="password" name="password1" id="password1" class="pwdExt" value="" />

jsファイルの設定値で、アイコン画像のパスや動作に関する設定をサイトに合わせて編集する。
設定値の概要は下記を参照。

■javascriptの設定

jsファイル内の13~28行目付近にある設定値を編集することで、アイコン画像の配置場所、ファイル名、画像サイズや、
パスワード表示中に入力を受け付けるか否かなどの設定をすることができる。

//-----------------------------------------
// 設定値
//-----------------------------------------
conf : {
	targetClass : 'pwdExt', // 対象とするクラス
	readonly : true, // パスワード表示中の入力許可(true:禁止/false:許可)
	icon : {
		path : 'images/', // アイコン画像の配置ディレクトリ(ルート・絶対・相対/jsを使用するhtmlファイルからの位置)
		open : 'icon_lock_close.gif', // 表示時のアイコン画像名
		close : 'icon_lock_open.gif', // 非表示時のアイコン画像名
		width : '16', // アイコン画像の幅
		height : '16', // アイコン画像の高さ
		alt : 'パスワードを表示する', // アイコン画像のalt
		style : 'cursor:pointer; padding-left:3px;' // アイコン画像に適用するスタイル
	}
},