微信Android X5内核主动限制密码框focus事件，需避免自动聚焦、显式设置inputmode="text"、固定height并用flex布局、按钮用button标签且z-index>1，遵循X5特有规则而非标准浏览器逻辑。
微信内置浏览器不触发 input[type="password"] 的 focus 事件
微信 Android（尤其是旧版 X5 内核）对密码输入框的焦点行为做了拦截，focus() 调用常静默失败，且不会抛错。这不是 bug，是 X5 内核为防键盘误弹做的主动限制。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 避免在页面加载后立即调用
input.focus()，尤其不要在DOMContentLoaded或mounted中直接聚焦密码框 - 改用用户可感知的交互触发：比如点击「登录」按钮后再聚焦，或绑定在
touchstart/click回调里（注意 iOS Safari 需要真点击，不能靠 JS 模拟） - 若必须自动聚焦，可先聚焦一个隐藏的
input[type="text"]（宽高 0、透明、position: absolute），再快速切换到密码框——部分 X5 版本对此更宽容
微信中 input[type="password"] 键盘不弹出或弹出后闪退
本质是微信对 inputmode 和 autocapitalize 等属性的解析不一致，加上某些安卓机型 WebView 对密码类型软键盘适配差。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 显式添加
inputmode="text"（不是"password"）——X5 会忽略该值但不报错，反而能绕过其内部键盘策略 - 移除
autocapitalize="off"和autocomplete="off"（微信某些版本会因这些属性拒绝唤起键盘） - 确保密码框不在
transform: scale(0)、opacity: 0或display: none状态下被聚焦；可用visibility: hidden+ 定位移出视口替代 - 测试时优先用真机，模拟器和 Chrome DevTools 的「微信调试模式」无法复现此问题
微信内密码框光标错位、文字重叠或 placeholder 不显示
这是 X5 内核对 CSS 层叠和行高计算的兼容性缺陷，常见于设置了 line-height、padding 不对称或父容器有 transform 的场景。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给密码框设置固定
height（如40px），并用box-sizing: border-box，避免依赖line-height垂直居中 - 慎用
vertical-align，X5 对 inline 元素的对齐逻辑异常；改用 flex 布局包裹 -
placeholder失效时，可加一层绝对定位的<span></span>模拟，并监听input和blur手动控制显隐 - 避免在密码框上直接应用
transform: translateZ(0)或will-change，易触发 X5 渲染层错乱
微信中密码明文切换按钮点击无响应或样式错乱
自定义「显示/隐藏密码」按钮常因事件穿透、z-index 层级或 X5 对 pointer-events 的处理异常而失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 按钮使用
<button type="button"></button>而非<div>，并确保其父容器未设置 <code>pointer-events: none - 密码框和按钮放在同一
position: relative容器内，按钮用position: absolute定位，z-index 设为 2 以上（X5 默认 input z-index 是 1） - 切换时不要仅改
type属性（input.type = "text"→"password"），需同步重置value并触发input事件，否则部分安卓微信会卡住光标 - 若用 Vue/React，避免直接操作 DOM
type，改用受控组件 +key强制重渲染整个输入框
微信端密码交互的真正难点不在功能实现，而在“什么时候不该做”——比如不该在页面就绪时自动聚焦、不该用纯 CSS 控制 placeholder、不该假设所有事件生命周期和标准浏览器一致。X5 的行为更像是一个有自己规则的子系统，而不是一个简化版 Chrome。
