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

jQuery 中实现密码显示/隐藏的 HTML 内容切换教程

本文介绍如何使用 jQuery 在密码遮罩文本（如 ●●●●●●）与明文密码（如 12345678）之间安全、可逆地切换，利用 .html() 回调函数和 .data() 缓存原始值，避免硬编码或状态丢失。

本文介绍如何使用 jquery 在密码遮罩文本（如 ●●●●●●）与明文密码（如 12345678）之间安全、可逆地切换，利用 `.html()` 回调函数和 `.data()` 缓存原始值，避免硬编码或状态丢失。

在前端交互中，常需实现“点击眼睛图标切换密码可见性”的功能。虽然标准做法是使用 <input type="password"> 并动态切换 type 属性（password ↔ text），但若受限于 DOM 结构（例如仅允许使用 <span></span> 显示密码），则需手动管理“原始遮罩内容”与“明文密码”之间的双向切换。

核心思路是：不依赖外部变量存储旧值，而是利用 jQuery 的 .data() 方法将原始 HTML 安全绑定到元素自身，再通过 .html(function(index, oldHtml)) 回调获取当前内容，实现智能判断与替换。

以下是完整、健壮的实现方案：

$(".passw").click(function() {
  const plainPassword = "12345678"; // 实际项目中应从 input 或后端安全获取，切勿硬编码！
  $("#Password").html(function(i, currentHtml) {
    // 若当前显示的是明文，则恢复原始遮罩内容
    if (currentHtml === plainPassword) {
      return $(this).data("saved-mask") || "●●●●●●●●●●";
    } 
    // 否则保存当前遮罩内容，并显示明文
    else {
      $(this).data("saved-mask", currentHtml);
      return plainPassword;
    }
  });
});

✅ 关键要点说明：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

使用 .html(function(i, oldHtml)) 回调可原子化读取并更新内容，避免竞态问题；
.data("saved-mask", value) 将原始遮罩文本持久绑定至 #Password 元素，作用域隔离、无需全局变量；
首次切换前，currentHtml 即为初始的 Unicode 圆点序列（•...），后续均以实际渲染文本比对；
添加兜底逻辑 || "●●●●●●●●●●"，增强鲁棒性，防止 .data() 未命中时返回 undefined。

⚠️ 注意事项：

安全性警示：生产环境严禁在前端硬编码真实密码（如 "12345678"）。应由用户输入框实时读取、经加密处理后展示，或仅用于演示逻辑；
语义化建议：优先采用 <input type="password"> + type="text" 切换，符合无障碍标准（a11y）且原生支持复制、聚焦等行为；
图标反馈：可同步切换眼睛图标类名（如 fa-eye ↔ fa-eye-slash），提升用户体验。