Layui表单input框如何实现失焦后自动去除首尾空格-Layui教程-PHP中文网

应使用 layui 的 form.on('change') 事件配合 data.elem.value.trim() 去空格，避免直接监听 blur；需确保动态添加的 input 调用 form.render('input') 以启用事件绑定。

layui input 失焦时用 `trim()` 去空格，但别在 `blur` 里直接改 `value`

直接监听 blur 事件然后 input.value = input.value.trim() 看似简单，实际会破坏 layui 表单的校验状态和双向绑定逻辑。layui 的 form.on('submit') 和 form.verify 依赖于表单元素的原始变更流程，手动改 value 后，如果用户没再触发输入或焦点进出，form.val() 可能仍返回旧值（带空格），导致提交时校验不一致。

正确做法是借力 layui 的内置钩子：form.on('submit') 前统一处理，或用 form.on('change') + 防抖（更稳妥）。推荐后者，因为 change 在失焦且值变化时触发，天然契合“失焦后生效”场景：

form.on('change', 'input[name="username"]', function(data){ data.elem.value = data.elem.value.trim(); })
注意：必须用 data.elem.value 而非 this.value，避免闭包中 this 指向异常
该写法不影响 form.val() 获取结果，后续提交、校验均能拿到已去空格的值

为什么不用原生 `blur` + `addEventListener`

layui 初始化表单时会接管部分事件流，尤其当 input 是通过 form.render() 动态渲染时，原生 blur 监听可能失效或触发时机错乱；更关键的是，它绕过了 layui 的数据同步机制——比如你用 form.val('example', {username: ' abc '}) 初始化，再手动 blur 改值，layui 内部缓存的字段状态不会更新，form.val('example') 仍返回初始化时的带空格字符串。

所以必须走 layui 认可的事件通道：

优先用 form.on('change', selector, fn)，它是 layui 封装的、与内部状态联动的事件
若需兼容未绑定 name 的 input，可用 form.on('submit', function(data){ ... }) 在提交前批量 trim()，但无法做到“失焦即生效”
避免对同一 input 同时绑 blur 和 form.on('change')，易引发重复处理

多个 input 批量处理：用属性选择器匹配 `name` 或 `lay-verify`

实际页面往往有十几个 input，逐个写 form.on('change', 'input[name="xxx"]', ...) 不现实。layui 支持 CSS 属性选择器，可一次性覆盖：

form.on('change', 'input[name][lay-verify]', function(data){
  const val = data.elem.value;
  if (val !== val.trim()) {
    data.elem.value = val.trim();
  }
});

这个写法只对同时满足「有 name 属性」且「有 lay-verify 属性」的 input 生效，既避开隐藏域、按钮等干扰项，又天然适配需要校验的字段（通常也是要 trim 的）。如果某些字段不需要 trim（如密码、富文本），就别加 lay-verify，或单独排除：

排除特定 name：input[name]:not([name="password"])
只处理带空格的值：if (/^\s+|\s+$/.test(val)) {...}，避免无意义重赋值

注意 IE11 兼容性：`String.prototype.trim()` 没问题，但别用 `trimStart`/`trimEnd`

layui 官方支持 IE10+，而 trim() 在 IE9 就已支持，完全安全；但若你误用了 trimStart() 或正则 replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '')，虽功能等价，却可能因正则引擎差异在低版本 IE 中表现不稳定。最简方案就是坚持用原生 trim()：