在单击按钮 jQuery 上显示密码 - JavaScript

在用户注册或登录表单中，不少网站设计都会隐藏密码，让用户输入时不被窥视。但有时用户需要查看密码是否输入正确，这时让他们重复输入密码或把输入框的值清空并显示密码都不太友好。因此，一种解决办法是添加一个“显示密码”的按钮，让用户可以随时查看密码。

本文将介绍如何用 jQuery 和 JavaScript 在单击按钮时显示和隐藏密码。

HTML

首先，我们需要准备一个表单：

<form>
  <div>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password">
    <button type="button" id="show-password">显示密码</button>
  </div>
</form>

这里有一个密码输入框和一个“显示密码”的按钮。注意，按钮的 type 属性为 button，表示这不是提交按钮，不会触发表单提交事件。

CSS

为了方便后面的 JavaScript 实现，我们需要在 CSS 中添加一些样式：

#password.show {
  /* 把密码输入框的类型改为文本，就可以显示输入的字符了 */
  /* 注意：这里用的是“类选择器”，有一个点号开头 */
  /* 如果用 ID 选择器（用 # 号开头），会导致 CSS 文件很难维护 */
  /* 建议在项目中只使用类选择器，除非确定某个元素只出现一次 */
  /* 或者用“属性选择器”选择 input[type="password"]，但是 IE8 不支持 */
  /* 或者用“后代选择器” div input[type="password"]，但是选择范围太大 */
  /* 或者添加更多上下文约束，比如 #password-form #password.show */
  /* 但是如果后面修改了元素的父辈或祖先，也会导致样式失效 */
  /* 综上所述，最好还是用类选择器 */
  /* 或者在 JavaScript 中动态修改元素的类名，使样式生效 */
  /* 如果修改类名的操作比较频繁，可以考虑用 CSS 框架，比如 bootstrap */
  /* 把密码输入框和按钮的宽度调整为相同，以保持美观 */
  /* 或者用 flex 布局或表格布局等方式让它们对齐 */
  /* 这里用百分比单位表示，会根据不同分辨率自适应 */
  /* 或者用 rem 或 vw/vh 等单位，不过 IE8 不支持 */
  /* 所以最好还是用百分比 */
  width: 50%;
}

#show-password {
  margin-left: -2em;
  /* 将按钮的 margin-left 调整为负的宽度，使它和输入框挨在一起 */
}

JavaScript

现在我们需要编写 JavaScript 代码来实现“显示密码”的功能。既然是单击按钮事件，我们就可以用 jQuery 的 click 方法绑定处理函数。代码如下：

$(function() {
  // 在文档加载完成后执行
  $('#show-password').click(function() {
    // 单击“显示密码”按钮时执行
    var $input = $('#password');
    if ($input.hasClass('show')) {
      // 已经显示密码了，需要隐藏起来
      $input.attr('type', 'password').removeClass('show');
      $(this).text('显示密码');
    } else {
      // 没有显示密码，需要显示出来
      $input.attr('type', 'text').addClass('show');
      $(this).text('隐藏密码');
    }
  });
});

代码解释如下：

• $() 是 jQuery 的全局函数，可以用选择器选中一个或多个元素，返回一个 jQuery 对象。
• $() 的参数是 CSS 选择器，对应 HTML 中的元素。
• $() 的返回值是一个 jQuery 对象，该对象有很多方法，比如 click、text、attr、hasClass、addClass 和 removeClass。
• $(function() { ... }) 是 jQuery 的简写形式，表示在文档加载完成后执行内部的函数。
• $('#show-password') 选择 ID 为 show-password 的元素。
• .click(function() { ... }) 给选中的元素绑定单击事件处理函数。
• $input 保存了 ID 为 password 的元素。
• $input.hasClass('show') 判断密码输入框是否有 show 类。
• $input.attr('type', 'password') 修改密码输入框的类型为 password，即隐藏密码。
• $input.removeClass('show') 移除密码输入框的 show 类，即密码已经隐藏。
• $(this).text('显示密码') 修改“显示密码”按钮的文本为“显示密码”。
• $input.attr('type', 'text') 修改密码输入框的类型为 text，即显示密码。
• $input.addClass('show') 添加密码输入框的 show 类，即密码已经显示。
• $(this).text('隐藏密码') 修改“显示密码”按钮的文本为“隐藏密码”。

总结

本文介绍了如何用 jQuery 和 JavaScript 实现单击按钮显示和隐藏密码的功能。代码简单易懂，适合初学者练习。但是，这只是一个 DEMO，实际项目中需要考虑更多的安全性和可用性问题，比如 XSS 攻击、密码长度和复杂度要求、密码强度评估、自动取消显示、touch 端支持等等。同时，不同浏览器对 HTML5 的支持程度也不尽相同，需要对选项做出适当的兼容性处理。总之，开发时要谨慎、考虑全面。