当我们需要提供更多的内容或者选项时，经常会用到表单，但是大量的表单元素很容易造成页面的混乱。因此，有时候我们需要将表单元素隐藏起来，只将必要的内容展示在页面上。这时，我们可以使用 JavaScript 帮助我们实现显示/隐藏表单文字。
下面是一条实现的完整攻略：
- 添加 HTML 元素
为了实现显示/隐藏表单文字，我们需要使用 JavaScript 操作 HTML 元素。因此，首先我们需要将需要隐藏的表单元素添加到 HTML 页面上。在这里，我们添加一个文本框和一个密码框：
<label>
用户名：
<input type="text" id="username" />
</label>
<label>
密码：
<input type="password" id="password" />
</label>
- 添加触发器元素
我们需要添加一个可以触发显示/隐藏表单文字的元素。在这里，我们添加一个按钮：
<button id="toggle-password">显示/隐藏密码</button>
- 编写 JavaScript 代码
我们需要编写 JavaScript 代码，以实现显示/隐藏表单文字。我们可以使用 jQuery 简化代码。
首先，我们将表单元素的值保存到变量中：
var username = $("#username");
var password = $("#password");
然后，我们给按钮添加一个点击事件监听器。在这个事件监听器中，我们将检查密码框是否被隐藏。
如果它被隐藏，我们将其重新显示，并更新按钮的文本为“隐藏密码”，否则，我们将其隐藏，并更新按钮的文本为“显示密码”：
$("#toggle-password").on("click", function() {
if(password.attr("type") == "password") {
password.attr("type", "text");
$(this).html("隐藏密码");
} else {
password.attr("type", "password");
$(this).html("显示密码");
}
});
- 完整示例
下面是一个完整的示例，演示了如何使用 JavaScript 实现显示/隐藏表单文字：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>显示/隐藏表单文字</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<label>
用户名：
<input type="text" id="username" />
</label>
<label>
密码：
<input type="password" id="password" />
</label>
<button id="toggle-password">显示/隐藏密码</button>
<script>
var username = $("#username");
var password = $("#password");
$("#toggle-password").on("click", function() {
if(password.attr("type") == "password") {
password.attr("type", "text");
$(this).html("隐藏密码");
} else {
password.attr("type", "password");
$(this).html("显示密码");
}
});
</script>
</body>
</html>
另一个示例，实现了显示/隐藏表单文字的另一种方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>显示/隐藏表单文字</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.hidden { display: none; }
</style>
</head>
<body>
<label>
用户名：
<input type="text" id="username" />
</label>
<label>
密码：
<input type="password" id="password" />
</label>
<label>
<input type="checkbox" id="show-password" />显示密码
</label>
<script>
var username = $("#username");
var password = $("#password");
var showPassword = $("#show-password");
showPassword.on("click", function() {
if(showPassword.is(":checked")) {
password.attr("type", "text");
} else {
password.attr("type", "password");
}
});
</script>
</body>
</html>
在这个示例中，我们添加了一个复选框来实现显示/隐藏表单文字。当复选框被选中时，我们将密码框元素的 type 属性更改为“text”，从而显示内容。当复选框未选中时，我们将其更改为“password”，从而隐藏内容。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript实现显示隐藏表单文字 - Python技术站
微信扫一扫 
支付宝扫一扫 