密码输入框切换必须用与type="text"互切，不可动态改type；需用布尔变量同步状态、保存value、更新按钮文案/图标；按钮应绑定在上并添加aria属性；ie11需dom替换方案；移动端需focus+setselectionrange防键盘异常。
密码输入框必须用 <input type="password"> 才能切换
直接写 <input type="text"> 再改 type 是无效的——浏览器会清空输入值。必须从 password 切换到 text，反之亦然，且不能重置 value。
常见错误是监听点击后直接 el.type = 'text'，但没做状态同步或按钮文案更新，导致点一次就失效、或图标不翻转。
- 始终用一个布尔变量（如
isPasswordVisible）记录当前状态 - 切换前先保存当前
value，切完再赋回去（现代浏览器其实不需要手动赋值，但低版本 Safari 有兼容风险） - 按钮文案或图标要随状态实时更新，否则用户无法判断当前是否明文
按钮事件必须绑定在 <button></button> 上，不能用 <label></label> 或伪元素模拟
用 <label></label> for 关联 input 虽然能触发 focus，但无法可靠控制 type 切换；用 ::after 伪元素画个“眼睛”图标更危险——它根本没事件能力，点击穿透到 input 上反而会失焦。
实操建议：
- 按钮放在 input 右侧，用 flex 布局对齐，不要用绝对定位压盖，否则移动端点不准
- 给按钮加
type="button"，避免表单意外提交 - 添加
aria-label="显示密码"和aria-pressed属性，支持读屏器 - 禁用默认 button 样式：移除
border、background，用cursor: pointer和 hover 效果增强反馈
IE11 不支持直接改 input.type，需用 DOM 替换方案
IE11 下修改 type 属性会抛错 InvalidStateError。必须用 outerHTML 或 replaceChild 完整替换节点，同时保留 value、name、id 等关键属性。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
简单兼容写法（不依赖框架）：
function togglePasswordVisibility(input, button) {
const isPassword = input.type === 'password';
const newValue = isPassword ? input.value : '';
const attrs = ['name', 'id', 'class', 'autocomplete', 'required'];
const attrStr = attrs
.map(attr => input.hasAttribute(attr) ? `${attr}="${input.getAttribute(attr)}"` : '')
.filter(Boolean)
.join(' ');
const newInput = document.createElement('input');
newInput.type = isPassword ? 'text' : 'password';
newInput.value = newValue;
newInput.setAttribute('aria-label', isPassword ? '隐藏密码' : '显示密码');
newInput.outerHTML = `<input type="${isPassword ? 'text' : 'password'}" value="${newValue}">`;
// 实际中需 replaceChild 并重新绑定事件，此处略去细节
}
多数项目已放弃 IE11，若必须支持，建议用 input.cloneNode(true) + 属性迁移，比 outerHTML 更可控。
移动端 Safari 键盘行为容易出问题
iOS Safari 在 type="text" 下会自动唤起全键盘（含数字/符号），而 password 是精简键盘。切换后若光标不在末尾，用户可能输错位置；更糟的是，某些机型切换瞬间会触发键盘收起再弹出，体验卡顿。
缓解方式：
- 切换后立即调用
input.focus()，并用input.setSelectionRange(input.value.length, input.value.length)把光标移到末尾 - 避免在 input 失焦时执行切换（比如用户刚点完别处又点眼睛图标），加个
if (document.activeElement === input)判断 - 不要用 CSS
transition动画影响 input 尺寸，否则键盘可能异常跳动
真正麻烦的不是代码，而是不同 iOS 版本对 type 切换 + focus 的响应节奏不一致——得真机反复测，模拟器靠不住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
