JavaScript实现显示隐藏表单文字

2023年6月10日下午8:47 • JavaScript

当我们需要提供更多的内容或者选项时，经常会用到表单，但是大量的表单元素很容易造成页面的混乱。因此，有时候我们需要将表单元素隐藏起来，只将必要的内容展示在页面上。这时，我们可以使用 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技术站