原生input加type="search"不够用，因Layui不接管其清除按钮样式，Firefox中图标偏移、点击区小，且form.render()不识别，导致验证和联动失效；应改用type="text"配合layui-icon-clear自定义清除按钮。
为什么原生 input 加 type="search" 不够用
layui 默认不接管 type="search" 的清除按钮样式，且该类型在部分浏览器（如 firefox）中清除图标位置偏移、点击区域小，与 layui 表单整体风格不一致。更关键的是，layui 的 form.render() 不识别这种类型，导致表单验证、联动等逻辑可能失效。
用 layui.input + 自定义清除图标最稳妥
核心思路：保留 input 为 type="text"，手动添加一个 × 图标作为清除按钮，绑定事件控制显示/隐藏和清空逻辑。Layui 提供了 layui-icon-clear 图标类，直接复用即可。
实操建议：
- 给
input外层加class="layui-input-inline"或包裹在div class="layui-input"中，确保宽度和边框与 Layui 一致 - 在
input后紧邻插入<i class="layui-icon layui-icon-clear"></i>，并设style="display:none;" - 监听
input的input事件：值非空时显示图标，为空时隐藏 - 给图标绑定
click事件，清空input.value并触发input事件（便于后续监听或验证） - 注意图标点击时要阻止冒泡，避免意外触发父容器事件
示例片段：
<div class="layui-input">
<input type="text" id="searchInput" placeholder="请输入关键词" class="layui-input">
<i class="layui-icon layui-icon-clear" id="clearBtn" style="display:none;"></i>
</div>
<script>
const input = document.getElementById('searchInput');
const clearBtn = document.getElementById('clearBtn');
input.addEventListener('input', () => {
clearBtn.style.display = input.value ? 'inline-block' : 'none';
});
clearBtn.addEventListener('click', (e) => {
e.stopPropagation();
input.value = '';
input.focus();
input.dispatchEvent(new Event('input')); // 触发验证或搜索逻辑
});
</script>
兼容 Layui 表单模块的写法（推荐用于带验证场景）
若该输入框已纳入 form.on('submit(...)') 或使用了 lay-verify 属性，需确保清除操作后验证状态同步更新。Layui 的验证依赖元素的 value 和 lay-verify 属性，单纯清空值还不够。
实操建议：
- 清除后调用
form.validate('filterName')（如果有 filter）或主动重置验证状态 - 若使用了
lay-verType="tips"，清空后可手动移除layui-form-danger类：input.classList.remove('layui-form-danger') - 避免在清除逻辑里调用
form.render()—— 它不刷新验证状态，反而可能重置图标显示 - 如果配合
autocomplete="off"使用，清除按钮点击后记得再调一次input.setAttribute('autocomplete', 'off')防止 Chrome 自动填充覆盖
移动端点击区域小？加一层透明遮罩
直接点击 layui-icon-clear 在手机上容易误触或点不中，因为图标本身尺寸小（默认 16px）。不建议放大图标破坏 UI 一致性，而是用 CSS 扩展点击热区。
实操建议：
- 给清除图标外层加
position: relative，图标自身设position: absolute; right: 10px; top: 50%; transform: translateY(-50%) - 用伪元素扩展热区：
::after { content: ''; position: absolute; width: 24px; height: 24px; right: 0; top: 50%; transform: translateY(-50%); } - 确保父容器
padding-right留足空间，避免图标被截断
这个细节在真机调试时最容易被忽略——模拟器点得准，一上手机就失灵。
