layui密码框需手动添加小眼睛图标并绑定事件：在input同级容器插入layui-icon，点击时用setAttribute切换type，再调用form.render('input')重绘样式，同时处理焦点保存与恢复。
layui form密码框怎么加“显示/隐藏”小眼睛图标
直接用 layui.form.render('password') 不行，layui 原生 form.password 组件不自带切换功能，得自己补 dom 和事件。核心是：在密码输入框右侧插入一个可点击的图标按钮，动态切换 type 属性，并同步更新图标状态。
- 必须手动在
<input type="password">同级或父容器里加一个<i class="layui-icon"></i>（默认闭眼）或（睁眼） - 不能只改
type，还得调用layui.form.render('input')让 layui 重新识别样式（否则边框、圆角会错乱） - 别用
document.getElementById直接操作，优先用 layui 的form.on('submit(...)')外的独立事件绑定，避免表单提交时干扰
点击小眼睛后密码 type 切换失效或样式错乱
常见原因是没触发 layui 的样式重绘，或者 DOM 结构不符合其渲染逻辑。layui 的 form 模块对 input 的包装有强依赖：它期望密码框被包裹在 <div class="layui-form-item"> 内，且图标按钮需放在 <div class="layui-input-block"> 或同级位置。
- 确保图标按钮和
<input>在同一个<div class="layui-input-block">下，否则form.render('input')可能找不到目标 - 切 type 时用
el.setAttribute('type', 'text')而不是el.type = 'text'，后者在某些旧版浏览器中不生效 - 切换后立即执行
layui.form.render('input')，不要等 nextTick 或 setTimeout —— layui 不吃那一套
如何兼容 layui 2.x 和 3.x 的密码切换写法
layui 2.8.18 之前没有内置密码可见开关，3.x 开始实验性支持 lay-show-password 属性，但默认不启用，且行为不一致：2.x 需全手写，3.x 可用属性但需额外加载模块。
- 2.x 稳定方案：纯 JS 控制 + 手动插图标，无依赖，推荐用于生产环境
- 3.x 若想用
lay-show-password="true"，必须先layui.use(['form', 'password'])，且该模块未进正式文档，API 可能变动 - 混用风险：同时写了
lay-show-password又手动绑 click，会导致图标重复、事件冲突，建议二选一
密码框切换后回车提交失效或焦点丢失
这是最隐蔽的坑：切换 type 时，浏览器会重置输入框的 focus 状态，如果用户正聚焦在密码框上并按回车，可能触发不了表单 submit 事件，尤其在 form.on('submit(...)') 里做验证时容易漏掉。
- 切换前后手动保存/恢复焦点：
const active = document.activeElement; ... el.focus(); - 避免在
input上直接监听keypress回车，统一走form.on('submit(...)')，并在其中用event.preventDefault()控制流程 - 如果用了第三方校验库（如 validate.js），注意它可能缓存了初始
type值，切换后要主动调用校验方法重检
display: none 隐藏图标，结果整个切换逻辑就静默失效了。 
