この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:3
ページ更新者:T
更新日時:2026-05-17 06:28:43

タイトル: パスワードを一時的に表示させる方法
SEOタイトル: ボタンを押してパスワードを一時的に表示させる方法(表示/非表示切り替え)【Javascript/jQuery】

この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。

<h2>やりたいこと</h2>

<p><img src="https://jpn.itlibra.com/uploadImage/20200206171757_3300154.png" /></p>

<p>通常、パスワード入力欄は「●●●●●」と表示されるが、上記のように目のアイコンを押すことでパスワードを可視化したい。</p>

<p>&nbsp;</p>

<h2>実装</h2>

<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
	<tbody>
		<tr>
			<td style="background-color:#000000">
			<p><span style="color:#f1c40f"><script src="//code.jquery.com/jquery-2.1.3.min.js"></script><br />
			<link rel="stylesheet" href="//cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css"></span></p>

			<p><span style="color:#2ecc71"><input id="password" type="password"><br />
			<span class="field-icon"><br />
			&nbsp; &nbsp; <i toggle="password-field" class="mdi mdi-eye toggle-password"></i><br />
			</span></span></p>

			<p><span style="color:#3498db"><script><br />
			$(".toggle-password").click(function () {<br />
			&nbsp; &nbsp; $(this).toggleClass("mdi-eye mdi-eye-off");</span></p>

			<p><span style="color:#3498db">&nbsp; &nbsp; var input = $(this).parent().prev("input");<br />
			&nbsp; &nbsp; if (input.attr("type") == "password") {<br />
			&nbsp; &nbsp; &nbsp; &nbsp; input.attr("type", "text");<br />
			&nbsp; &nbsp; } else {<br />
			&nbsp; &nbsp; &nbsp; &nbsp; input.attr("type", "password");<br />
			&nbsp; &nbsp; }<br />
			});</script></span><br />
			&nbsp;</p>
			</td>
		</tr>
	</tbody>
</table>

<p><span style="color:#e74c3c">※CSSは別途必要</span></p>