H5 中怎么用 SVG 实现密码输入框隐藏与显示的动态锁头变化-H5教程-PHP中文网

在H5中用SVG实现密码框锁头动画，核心是通过CSS class切换闭合/开启两组元素并配合opacity过渡，结合JS切换input类型及aria-label，确保轻量、平滑且可访问。

h5 中怎么用 svg 实现密码输入框隐藏与显示的动态锁头变化

在 H5 页面中，用 SVG 实现密码输入框的“隐藏/显示”切换时的锁头动画，核心是通过动态切换 SVG 路径（<path></path>）或使用 <g></g> 分组控制不同状态（上锁 / 开锁），配合 CSS 过渡或 JavaScript 状态驱动。不需要依赖外部图标库，纯 SVG + 原生 JS 即可完成平滑、轻量的视觉反馈。

1. 准备两个 SVG 锁头状态

画一个简洁的锁头 SVG，包含两套路径：一把「闭合锁」（锁舌插入）和一把「开启锁」（锁舌弹出）。建议用同一 viewBox，确保尺寸对齐，便于切换：

例如（简化示意）：

<svg viewBox="0 0 24 24" width="24" height="24">
  <!-- 闭合锁（默认）-->
  <g id="lock-closed">
    <path d="M18 10h-1V7c0-2.76-2.24-5-5-5S7 4.24 7 7v3H6c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-8c0-1.1-.9-2-2-2zM9 7c0-1.66 1.34-3 3-3s3 1.34 3 3v3H9V7z"/>
  </g>
  <!-- 开启锁（初始隐藏）-->
  <g id="lock-open" style="display: none;">
    <path d="M18 10h-1V7c0-2.76-2.24-5-5-5S7 4.24 7 7v3H6c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-8c0-1.1-.9-2-2-2zM9 7c0-1.66 1.34-3 3-3s3 1.34 3 3v3H9V7z"/>
    <path d="M12 14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" fill="#f44336"/> <!-- 模拟弹出的锁舌 -->
  </g>
</svg>

关键点：
• 两组 <g></g> 共享相同 viewBox 和比例
• 开锁态加了红色小矩形表示“锁舌弹出”，增强状态辨识度
• 初始用 style="display: none" 隐藏开锁态

2. 绑定点击事件并切换状态

给锁图标外层容器（如 <button></button> 或 <div>）绑定点击，切换密码输入框 <code>type 属性，并同步更新 SVG 显示：

const toggleBtn = document.querySelector('#password-toggle');
const pwdInput = document.querySelector('#password-input');
const lockClosed = document.querySelector('#lock-closed');
const lockOpen = document.querySelector('#lock-open');
<p>toggleBtn.addEventListener('click', () => {
const isPassword = pwdInput.type === 'password';</p><p>pwdInput.type = isPassword ? 'text' : 'password';</p><p>// 切换 SVG 可见性
lockClosed.style.display = isPassword ? 'block' : 'none';
lockOpen.style.display = isPassword ? 'none' : 'block';
});

注意：
• 不要直接操作 innerHTML 或重新插入 SVG，避免重绘开销
• 用 display 切换比 opacity 更精准（无占位干扰）

3. 加入简单过渡动画（可选但推荐）

SVG 本身不支持 transition 对 display，但可通过 opacity + visibility 模拟淡入淡出效果：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

先给两组 <g></g> 添加基础样式：

svg g {
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
svg g.hidden {
  opacity: 0;
  visibility: hidden;
}

然后 JS 中改为 class 控制：

if (isPassword) {
  lockClosed.classList.remove('hidden');
  lockOpen.classList.add('hidden');
} else {
  lockClosed.classList.add('hidden');
  lockOpen.classList.remove('hidden');
}

这样视觉更柔和，且兼容性好（无需 CSS @keyframes）。

4. 响应式与可访问性补充

确保交互对所有用户友好：

为按钮添加 aria-label="显示密码"，并随状态动态更新为“隐藏密码”
锁图标用 <button></button> 包裹，而非 <div>，保障键盘可聚焦、回车可触发<li>SVG 内部添加 <code>role="img" 和 aria-hidden="true"，避免屏幕阅读器重复读取路径
在小屏设备上适当放大点击热区（如 padding 12px），提升触控体验