必须将 layui-icon-clear 放在与 input 同级的 layui-input 容器内，设 position: absolute、right: 10px、cursor: pointer、z-index≥10，并用 $input.val('').trigger('change') 同步 form 缓存；动态元素需事件委托；清空后须调用 table.reload({ where: form.val('filterform') }) 确保 ui 与请求参数同步。
layui-input 里怎么放 layui-icon-clear 才能点中
图标必须和 <input> 在同一级容器内，比如 <div class="layui-input">，不能塞进 <code><input> 标签内部，也不能用 position: relative 包错父级。常见错误是把图标写在 <input> 后面但没设 position: absolute 和 right: 10px 这类定位，结果图标跑出框外或被遮挡。
必须加 cursor: pointer 和足够高的 z-index（建议 ≥ 10），否则 iOS 或 Chrome 上点不中。移动端热区至少要 32×32px，直接给 <i></i> 设宽高 + display: flex 居中更稳。
点击叉号后值没清掉？检查 change 事件触发了没
Layui 的 form.val('filterName') 不读 DOM 的 value，而是依赖原生 change 事件同步缓存。只写 $input.val('') 是无效的。
- ✅ 正确：
$input.val('').trigger('change') - ❌ 错误：
$input[0].value = ''、$input.val('')单独调用、或用form.val('filterName', {})覆盖整个表单（它不作用于未注册字段）
如果输入框是动态生成的（比如表格重载后插入），要用事件委托：$(document).on('click', '.layui-icon-clear', handler)，避免绑定丢失。
表格重载后还是旧搜索条件？where 和 UI 必须同步更新
清空 UI ≠ 清空请求参数。典型现象：点叉号 → 输入框变空 → 点搜索 → 表格仍按旧关键词过滤。这是因为 table.reload({ where: { keyword: $('#keyword').val() } }) 直接取 DOM 值，绕过了 form.val() 流程。
- 确保所有搜索项都注册到 form 模块（
name="keyword"等） - 重载前显式构造：
table.reload('tableId', { where: form.val('filterForm') }) - 如果用了
laydate或select，它们的值不会被$input.val('')影响，得单独调laydateIns.setValue('')或form.val('filterForm', { date: '', type: '' })再form.render()
移动端点不中、图标闪动？别用 display: none
iOS Safari 对小图标的点击响应敏感，单纯放大图标不够，容易误判为滑动。用 display: none 控制显隐会导致事件监听失效。
正确做法：
- 显隐控制用
opacity: 0; visibility: hidden;+transition - 显示逻辑用 JS 判断：
input.value.trim() !== ''，不要监听input事件实时切显隐——避免频繁 DOM 操作 - 增大热区：用
<i class="layui-icon layui-icon-clear"></i>包一层，设宽高 32px、display: flex居中
最易忽略的是：清除操作后没同步 form.val() 和 table.reload() 的 where，导致 UI 和请求参数永远不同步。
