在Javascript中同时显示和隐藏多个密码,可以通过操作DOM元素来实现。以下是一个简单的示例,展示了如何使用JavaScript来切换多个密码输入框的可见性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle Password Visibility</title>
</head>
<body>
<div>
<label for="password1">Password 1:</label>
<input type="password" id="password1">
<button onclick="toggleVisibility('password1')">Show/Hide</button>
</div>
<div>
<label for="password2">Password 2:</label>
<input type="password" id="password2">
<button onclick="toggleVisibility('password2')">Show/Hide</button>
</div>
<script src="script.js"></script>
</body>
</html>
function toggleVisibility(inputId) {
const input = document.getElementById(inputId);
if (input.type === "password") {
input.type = "text";
} else {
input.type = "password";
}
}
toggleVisibility
函数。toggleVisibility
函数通过改变输入框的type
属性来切换密码的可见性。如果当前是password
类型,则改为text
类型以显示密码;如果是text
类型,则改为password
类型以隐藏密码。这种功能在用户需要确认密码输入是否正确时非常有用,例如在注册或修改密码的页面中。
通过这种方式,你可以轻松地在JavaScript中同时显示和隐藏多个密码输入框。
领取专属 10元无门槛券
手把手带您无忧上云