layui表单怎么实现密码输入框明文/密文点击图标切换-Layui教程-PHP中文网

layui密码框需手动添加眼睛图标并绑定点击事件：在input同级容器插入layui-icon，用setattribute切换type，调用form.render('input')重绘样式，并保存恢复光标位置。

layui表单怎么实现密码输入框明文/密文点击图标切换

layui 密码框怎么加眼睛图标切换显示状态

layui 自带的 form.password 不提供原生明文/密文切换，必须手动补全图标、事件和 input 类型切换逻辑。核心是监听图标点击，动态修改 input[type] 并同步光标位置。

怎么给 layui 密码输入框加可点击的眼睛图标

layui 的 form.render('password') 会把 input[type="password"] 渲染成带默认图标的结构，但图标默认不可交互。需要在渲染后手动插入可点击的 toggle 图标，并绑定事件：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

用 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;
    });
  });
});