HTML 是一种用于创建网页的标准标记语言，它可以用来描述网页的结构和内容，在 HTML 中，密码通常以明文形式显示，这可能会导致安全问题，为了保护用户隐私，我们可以使用一些技巧来隐藏密码，使其在输入时只显示为星号或其他字符，本文将介绍如何在 HTML 中显示和隐藏密码。
1. 使用 <input> 标签
<input> 标签是 HTML 中最常用的表单元素之一，它可以用来创建文本框、按钮等表单控件，要创建一个密码输入框，我们可以使用 type="password" 属性，这样，当用户在浏览器中输入密码时，密码将以星号或圆点的形式显示。
示例代码：
<form> <label for="pwd">Password:</label> <input type="password" id="pwd" name="pwd"> <input type="submit" value="Submit"> </form>
在这个示例中，我们创建了一个包含用户名和密码输入框的表单，通过设置 type="password"，密码输入框将以星号的形式显示用户输入的内容。
2. 使用 CSS 样式
除了使用 <input> 标签的属性来隐藏密码外，我们还可以使用 CSS 样式来实现这一目的，通过设置 input[type="password"] 选择器，我们可以为密码输入框应用自定义的样式。
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
input[type="password"] {
-webkit-text-security: disc; /* Chrome, Safari, Opera */
text-security: disc; /* Firefox */
}
</style>
</head>
<body>
<form>
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd">
<input type="submit" value="Submit">
</form>
</body>
</html>
在这个示例中，我们为密码输入框应用了 -webkit-text-security: disc; 和 text-security: disc; 样式，这将使浏览器以圆点的形式显示用户输入的密码，需要注意的是，这种样式在某些浏览器中可能不起作用，因此我们需要添加浏览器前缀（如 -webkit-）以确保兼容性。
3. JavaScript 实现密码隐藏和显示功能
虽然使用 HTML 和 CSS 可以简单地隐藏密码，但这种方法无法实现密码的切换功能，用户可能需要查看他们输入的密码，以确保没有错误，为了实现这一功能，我们可以使用 JavaScript 来控制密码输入框的 type 属性。
示例代码：
<!DOCTYPE html>
<html>
<head>
<script>
function showPassword() {
var pwd = document.getElementById("pwd");
if (pwd.type === "password") {
pwd.type = "text";
} else {
pwd.type = "password";
}
}
</script>
</head>
<body>
<form>
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd">
<button type="button" onclick="showPassword()">Show/Hide</button>
<input type="submit" value="Submit">
</form>
</body>
</html>
在这个示例中，我们创建了一个按钮，当用户点击该按钮时，将触发 showPassword() JavaScript 函数，这个函数会检查密码输入框的类型，如果当前类型为 password，则将其更改为 text；否则，将其更改回 password，这样，用户就可以在需要时查看和编辑他们的密码，需要注意的是，这种方法仍然存在一定的安全风险，因为用户可以在浏览器中查看和复制密码，建议仅在确保安全性的情况下使用这种方法。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/395106.html
微信扫一扫 