パスワードを表示するチェックボックスをつけたい

パスワード入力欄は通常パスワードがマスクされてユーザー自身にも見えません。

確かにセキュリティの観点からは望ましい仕様です。

しかし、入力内容を確認したいときもあります。

そんなときに便利なのがこの機能です。

JavaScriptを使い、チェックボックスの"checked"属性の有無でtypeを"password"と"text"に切り替えているところがポイントです。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>パスワードの表示/非表示切り替え</title>
</head>

<body>
	<label for="password">パスワード:</label>
	<input type="password" id="password" />
	<input type="checkbox" id="showPassword" onchange="togglePasswordVisibility()" />
	<label for="showPassword">パスワードを表示する</label>

	<script>
		function togglePasswordVisibility() {
			let passwordInput = document.getElementById("password");
			let showPasswordCheckbox = document.getElementById("showPassword");

			if (showPasswordCheckbox.checked) {
				passwordInput.type = "text";
			} else {
				passwordInput.type = "password";
			}
		}
	</script>
</body>

</html>

Webアプリケーション制作のための小ネタ集　目次に戻る