为HTML表单添加密码显示与隐藏的切换功能-html教程-PHP中文网

最直接的方式是动态修改 input 元素的 type 属性为 "text" 或 "password"，但 ie 不支持；应使用 el.type = 'text' 而非 setattribute，配合 focus()、图标状态同步及参数化函数提升复用性与健壮性。

为html表单添加密码显示与隐藏的切换功能

点击图标切换 `type` 属性是最直接的方式

浏览器原生支持 input[type="password"] 和 input[type="text"]，切换只需动态修改 type。但注意：type 不能在 IE 中通过 JavaScript 修改（会报错），现代浏览器（Chrome/Firefox/Safari/Edge）均支持。

实操建议：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

用一个 <button></button> 或带 onclick 的图标元素触发切换，避免用 label 包裹整个输入框（易误触）
不要用 setAttribute('type', 'text') —— 某些旧版 Safari 下可能失效；改用 el.type = 'text' 更可靠
切换后聚焦到输入框（el.focus()），防止光标丢失
记得同步更新图标状态（比如从 ?️ 变成 ?️‍?️），否则用户无法感知当前模式

`togglePasswordVisibility()` 函数要处理 DOM 元素引用和初始状态

常见错误是函数里直接写死 document.getElementById('pwd')，导致复用困难；或没检查元素是否存在就调用 .type，报 Cannot set property 'type' of null。

实操建议：

函数接收两个参数：inputEl（密码输入框元素）和 toggleBtn（切换按钮元素），便于多个表单复用
初始化时给按钮加 data-visible="false"，后续靠这个判断当前状态，比依赖 input.type 更稳定（因为某些浏览器 devtools 里改 type 不触发 DOM 变更）
切换前先 if (!inputEl || !toggleBtn) return，避免脚本中断

示例片段：

function togglePasswordVisibility(inputEl, toggleBtn) {
  if (!inputEl || !toggleBtn) return;
  const isVisible = toggleBtn.dataset.visible === 'true';
  inputEl.type = isVisible ? 'password' : 'text';
  toggleBtn.dataset.visible = isVisible ? 'false' : 'true';
  inputEl.focus();
}

用 CSS 控制图标位置与可访问性不能只靠视觉

把图标放在输入框右侧、紧贴边框，看似简单，但容易忽略键盘操作和屏幕阅读器支持。

实操建议：

图标用 <button type="button"></button>，不是 <span></span> 或 <i></i> —— 否则键盘无法 Tab 进入，且无默认语义
添加 aria-label="显示密码"，并在切换时动态更新为 "隐藏密码"
用 Flex 布局包裹 input 和 button，避免绝对定位导致响应式错位
禁用按钮默认样式：button { background: none; border: none; padding: 0; cursor: pointer; }，再单独加 hover/focus 样式

移动端触摸区域和防误触需要额外处理

小图标在手机上容易点歪，或者连续点击触发两次，导致“显示→隐藏→又显示”这种抖动现象。

实操建议：

按钮最小尺寸设为 44px × 44px（iOS 触摸热区最小推荐值），用 padding 扩展点击区域，而非只靠图标大小
加节流：let isToggling = false;，点击前检查，执行中设为 true，完成后延时 300ms 再置回 false
不要监听 touchend 单独事件 —— 它和 click 在移动端会同时触发，造成重复执行；统一用 click 即可（现代移动端 click 有 300ms 延迟但已普遍优化）
输入框获得焦点时自动隐藏密码（安全考虑），可在 inputEl.addEventListener('focus', () => { ... }) 里重置为 type="password"，但需避开用户主动点击图标的情况