如何在 jQuery 中实现密码显示/隐藏的 HTML 内容切换-html教程-PHP中文网

如何在 jQuery 中实现密码显示/隐藏的 HTML 内容切换

本文介绍使用 jQuery 在元素中安全切换密码明文与掩码（如圆点）的实用方法，通过 .html() 回调函数结合 .data() 缓存原始内容，避免硬编码、状态丢失和 DOM 同步问题。

本文介绍使用 jquery 在 `` 元素中安全切换密码明文与掩码（如圆点）的实用方法，通过 `.html()` 回调函数结合 `.data()` 缓存原始内容，避免硬编码、状态丢失和 dom 同步问题。

在前端开发中，常需实现“点击眼睛图标切换密码可见性”的交互效果。虽然标准做法是使用 <input type="password"> 并动态切换 type 属性（password ↔ text），但若受限于 UI 设计必须使用 <span></span> 显示掩码文本（如 ••••••••），则需手动管理“原始值”与“掩码值”之间的双向切换。

核心思路是：不依赖全局变量或重复赋值，而是利用 jQuery 的 .data() 方法持久化存储原始 HTML 内容，并通过 .html() 的回调函数获取当前值进行条件判断。这样既保证状态隔离（每个元素独立），又避免多次点击导致逻辑错乱。

以下为推荐实现代码：

$(".passw").click(function() {
  const passw = "12345678"; // 实际项目中应从 input 或 data 属性动态获取
  $("#Password").html(function(i, oldHtml) {
    if (oldHtml === passw) {
      // 当前显示的是明文 → 切回原始掩码
      return $(this).data("saved-pass") || "••••••••••";
    } else {
      // 当前显示的是掩码 → 保存原始掩码，显示明文
      $(this).data("saved-pass", oldHtml);
      return passw;
    }
  });
});

✅ 关键优势说明：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

使用 .html(function(index, oldHtml) { ... }) 回调确保读取的是实时 DOM 当前内容，而非缓存副本；
.data("saved-pass", value) 将原始掩码安全绑定到该 DOM 元素，生命周期与元素一致，无需手动清理；
比 if/else + .text() 或 .html() 分离调用更健壮，彻底规避竞态（如快速连点导致状态不同步）。

⚠️ 注意事项：

此方案仅适用于展示型切换（如调试或受限 UI 场景）。生产环境强烈建议改用 <input type="password">，并切换 type 属性——它原生支持无障碍访问、键盘操作（如密码粘贴）、浏览器密码管理器集成，且更安全（避免明文长期驻留 DOM）；
若需兼容旧版 jQuery（jquery-migrate 或验证 .data() 行为一致性；
密码明文（如 "12345678"）绝不应在前端硬编码，实际应用中应通过 $("#myInput").val() 动态读取，或由后端加密后透出安全令牌。

总结：用好 jQuery 的链式回调与数据绑定机制，可优雅解决看似简单的状态切换问题；但技术选型始终要回归最佳实践——优先采用语义化、标准化、安全的原生表单控件。