【jQuery】パスワードの表示・非表示を切り替える方法

javascript
この記事は約7分で読めます。
スポンサーリンク

フォームのパスワードを入力する時、自分で打ったパスワードを見たい時ってあるよね。
同じパスワードを2回打つフォームもあるし、健忘症な自分は、
どんなパスワードを打ったかすぐ忘れちゃうので、表示できる機能があるとありがたいです。
ではデモとコードを!

デモ

HTML

<label class="pass">
	<input type="password" placeholder="パスワードを入力してください" />
	<span class="eye">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
			<path d="M512,319.761c-0.881-1.49-21.82-38.71-63.992-76.622c-8.616-7.728-18.184-15.47-28.604-22.926l25.519-44.207c6.162-10.679,2.511-24.338-8.176-30.507l-1.636-0.936c-10.679-6.169-24.338-2.511-30.506,8.168l-24.996,43.305c-3.679-1.853-7.427-3.665-11.274-5.392c-26.058-11.756-55.921-20.289-89.057-23.086v-53.942c0-12.33-10.001-22.331-22.331-22.331h-1.888c-12.337,0-22.338,10.001-22.338,22.331v53.942c-33.136,2.804-62.999,11.33-89.064,23.086c-3.854,1.742-7.498,3.644-11.197,5.518l-25.065-43.43c-6.16910.679-19.828-14.338-30.507-8.168l-1.636,0.936c-10.686,6.168-14.337,19.828-8.176,30.507l25.534,44.221c-23.184,16.582-41.934,34.625-56.285,50.662C12.624,297.444,0.643,318.636,0,319.761l29.332,16.484l13.673,7.749l0.021-0.042l0.014-0.014c0.895-1.63,20.324-34.689,56.482-66.328c18.071-15.848,40.248-31.332,66.278-42.787c26.066-11.456,55.915-18.96,90.198-18.974c35.108,0.014,65.565,7.881,92.058,19.799c39.682,17.848,70.321,45.172,90.806,68.133c10.245,11.463,17.938,21.785,22.981,29.101c2.532,3.657,4.392,6.566,5.581,8.49c0.588,0.965,1.021,1.679,1.28,2.119l0.259,0.448l0.042,0.063l9.708-5.518l-9.736,5.469L512,319.761z" style="fill: rgb(75, 75, 75);"></path><path d="M255.997,247.936c-47.711,0-86.386,38.675-86.386,86.393c0,47.711,38.675,86.386,86.386,86.386c47.718,0,86.393-38.675,86.393-86.386C342.39,286.611,303.715,247.936,255.997,247.936z" style="fill: rgb(75, 75, 75);"></path>
		</svg>
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
			<path d="M404.946,230.669C428.2,245.234,463.907,261.977,512,268.662c-32.248-25.252-53.918-48.832-67.492-66.023c14.297-12.091,27.43-25.52,39.049-40.207l-37.515-29.708c-21.308,26.916-48.434,49.013-79.43,64.366c-31.011,15.346-65.853,23.971-102.884,23.985c-37.027-0.014-71.872-8.639-102.883-23.985c-31-15.353-58.129-37.45-79.43-64.366l-37.522,29.708c9.073,11.461,19.068,22.154,29.791,32.067C60.933,211.915,37.696,239.141,0,268.662c53.55-7.446,91.748-27.35,114.486-42.848c8.111,5.122,16.475,9.884,25.121,14.159c1.249,0.615,2.515,1.208,3.774,1.802c-3.662,21.749-12.658,60.502-33.55,94.696c40.634-18.03,69.264-54.359,83.775-76.427c10.882,2.807,22.017,4.971,33.362,6.461l29.028,112.77l28.623-111.15c12.177-0.897,24.155-2.554,35.866-4.963c15.075,22.242,42.917,56.103,81.691,73.308c-18.993-31.083-28.153-65.928-32.414-88.351c6.135-2.51,12.184-5.217,18.096-8.147C393.68,237.087,399.352,233.932,404.946,230.669z" style="fill: rgb(75, 75, 75);"></path>
		</svg>
	</span>
</label>
</div>

CSS

.pass {
	position: relative;
}
.eye svg {
	position: absolute;
	top: 0px;
	right: 18px;
	width: 26px;
	height: 26px;
	opacity: 0;
	-webkit-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}
.eye svg:last-child {
	top: 9px;
	opacity: 1;
}

jQuery

$(".eye").on("click", function() {
	if($(".eye svg:first-child").css("opacity") == 0) {
		// パスワードを表示する
		$(".pass input").get(0).type = 'text';
		$(".eye svg:first-child").css({opacity: 1});
		$(".eye svg:last-child").css({opacity: 0});
	} else {
		// パスワードを非表示にする
		$(".pass input").get(0).type = 'password';
		$(".eye svg:first-child").css({opacity: 0});
		$(".eye svg:last-child").css({opacity: 1});
	}
});

解説

HTMLがちょっと長いですが、目のアイコンはsvgの直打ちになっているのでそのままコピペすればアイコンも表示されます。
パスワードを表示する方法は、jQuery内の「$(“.pass input”).get(0).type = ‘text’;」このjavascriptでinputの「type」属性をpasswordからtextに変更して表示非、表示を変更しています。
ちょっと調べたらjQueryでは、「type」属性を変更する方法が無い?のかjavascriptの「get()」で取得するみたい!
jQueryで書いてると、「get()」ってあまりなじみがないから「???」ってなるけど、こうゆう書き方しなきゃダメみたい。
それ以外のjQueryの記述は、開いた目や閉じた目のアイコンを表示したり消したりしてるだけだからね!
デベロッパーツールで確認すると、ちゃんと「type」属性が変更されてるのが確認できますね!

もし目のアイコンが気に入らなかったら、色々変更してね!
画像にpngやjpgを使う場合は、HTMLと合わせてCSSとjsの「svg」も「png」や「jpg」に変更してね!
以上で「jQueryでパスワードの表示・非表示を切り替える方法」終わりです!

SNSフォローボタン
エンデ・バタローをフォローする
javascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました