Layui表单input框如何实现点击右侧清除图标后自动聚焦-Layui教程-PHP中文网

点击清除图标后input不聚焦，根本原因是DOM结构不合法或input未正确绑定：需确保图标与input同属一个父容器（如layui-form-item）、input有唯一id或name、事件绑定前DOM已渲染完成，并用$(this).closest().find('input').val('').focus()健壮调用。

点击清除图标后 input 不聚焦？先确认 DOM 结构是否合法

常见现象是点击 .icon_clear 后，input 没反应，甚至报错 cannot read property 'focus' of null。根本原因往往是图标和 input 不在同一个可稳定访问的上下文中——比如图标用 <i></i> 写在 layui-form-item 外、input 没设 id 或 name、或者清空逻辑绑在了未渲染完成的节点上。

必须确保：

清除图标与目标 input 在同一级父容器内（推荐用 layui-form-item 包裹）
input 有唯一 id 或可通过 name 稳定定位（如 name="username"）
清除图标绑定事件时，input 已存在于 DOM 中（动态弹窗需等 layer.open 回调或 form.render() 后再绑定）

用 jQuery 绑定 click 事件并 focus() 的标准写法

这是最直接、兼容性最好的方式，不依赖 Layui 特定模块，适用于所有版本（包括 2.7.x 及更早）。

HTML 示例（注意结构）：

<div class="layui-form-item">
  <label class="layui-form-label">用户名</label>
  <div class="layui-input-block">
    <div class="layui-input-inline" style="position: relative;">
      <input type="text" name="username" id="username" class="layui-input" value="  abc  "><i class="layui-icon layui-icon-clear icon_clear" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; z-index: 2;"></i>
    </div>
  </div>
</div>

JS 绑定（放在 layer.open 成功回调里，或 form.render() 之后）：

$(".icon_clear").off('click').on('click', function() {
  const $input = $(this).closest('.layui-input-inline').find('input');
  $input.val('').focus();
});

关键点：

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

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

下载

用 .off('click').on('click') 防止重复绑定（尤其弹窗反复打开时）
$(this).closest(...).find('input') 比硬编码 #username 更健壮，适配多个同类 input
清除后立即 .focus()，不要加 setTimeout ——Layui 输入框无特殊异步焦点延迟

为什么不能只靠 `autofocus` 或原生 `focus()` 调用就完事？

单纯给 input 加 autofocus 属性，只在页面首次加载时生效；清除图标点击是运行时行为，必须显式调用 .focus()。但要注意两个易忽略的坑：

如果 input 被 display: none 或 visibility: hidden 过，.focus() 会静默失败（不报错但无光标），应改用 opacity: 0 + pointer-events: none 控制视觉隐藏
Layui 弹窗中，若在 success 回调里直接 document.getElementById('xxx').focus()，可能因 DOM 渲染未完成而失效；务必用 layui.$(function(){...}) 或 setTimeout(..., 0) 微任务兜底
移动端 Safari 对非用户手势触发的 .focus() 限制严格，清除图标点击属于合法手势，无需额外处理

结合失焦去空格时，清除+聚焦的顺序不能乱

如果你同时用了 form.on('change', ...) 去首尾空格，清除图标点击后立刻 .focus() 是安全的；但千万别在清除逻辑里手动 .val('').trim() ——trim() 对空字符串无效，且会干扰 form.on('change') 的触发条件（值未变就不会触发）。

正确组合是：