layui密码框需手动添加眼睛图标并绑定点击事件：在input同级容器插入layui-icon，用setAttribute切换type，调用form.render('input')重绘样式，并保存恢复光标位置。
layui 密码框怎么加眼睛图标切换显示状态
layui 自带的 form.password 不提供原生明文/密文切换，必须手动补全图标、事件和 input 类型切换逻辑。核心是监听图标点击，动态修改 input[type] 并同步光标位置。
怎么给 layui 密码输入框加可点击的眼睛图标
layui 的 form.render('password') 会把 input[type="password"] 渲染成带默认图标的结构，但图标默认不可交互。需要在渲染后手动插入可点击的 toggle 图标，并绑定事件：
- 用
form.on('render(form)')或 DOM 加载完成后操作，确保 layui 已完成初始渲染 - 在密码 input 同级的
.layui-input-wrap内追加一个<i class="layui-icon layui-icon-eye"></i>（或eye-invisible） - 图标需用
position: absolute定位到输入框右端，注意 z-index 和 padding-right 避免遮挡文字 - 给图标加
cursor: pointer和user-select: none，防止误触发文本选中
点击眼睛图标时 input type 切换不生效或光标丢失怎么办
直接改 input.type = 'text' 在部分浏览器（尤其是 Chrome）会导致焦点丢失、光标跳到开头，用户继续输入时体验断裂。正确做法是：
- 先保存当前光标位置：
const pos = input.selectionStart - 切换 type 前先
input.blur()，再改 type，再input.focus() - 切换后用
input.setSelectionRange(pos, pos)恢复光标位置（注意：仅当 input 有焦点时有效） - 避免在
input.focus()前做异步操作（如 setTimeout），否则setSelectionRange会失效 - IE 不支持
type动态切换，但 layui 官方已放弃 IE 支持，可忽略
// 示例：绑定 toggle 逻辑
form.on('render(form)', function() {
$('.layui-form input[type="password"]').each(function() {
const $input = $(this);
if ($input.next('.pwd-toggle').length) return;
const $toggle = $('<i class="layui-icon layui-icon-eye pwd-toggle" style="position:absolute;right:15px;top:50%;transform:translateY(-50%);cursor:pointer;z-index:5;"></i>');
$input.closest('.layui-input-wrap').append($toggle);
let isText = false;
$toggle.on('click', function() {
const pos = $input[0].selectionStart;
$input[0].blur();
$input[0].type = isText ? 'password' : 'text';
$input[0].focus();
$input[0].setSelectionRange(pos, pos);
$toggle.removeClass('layui-icon-eye layui-icon-eye-invisible')
.addClass(isText ? 'layui-icon-eye' : 'layui-icon-eye-invisible');
isText = !isText;
});
});
});
为什么用 layui-icon-eye-invisible 切换后图标不更新
图标类名切换失败，通常是因为 CSS 优先级或类名未被正确移除。layui 的 icon 是字体图标，依赖精确的 class 名匹配：
- 必须用
removeClass()显式清除旧 icon 类，不能只靠addClass() - 确保引入了 layui 的完整 icon 字体文件（
layui.css中定义），且未被其他 CSS 覆盖 - 检查浏览器控制台是否有字体加载失败或 404，尤其在本地开发时路径错误常见
- 如果用了自定义主题或压缩版 layui，确认
layui-icon-eye-invisible未被剔除（部分精简包会删冷门 icon）
