vue 项目给输入框增加trim()方法

方案:

  1. 在模板使用指令(最简单、最稳妥)
  • 在需要的输入上加 v-trim(支持 a-input):
js 复制代码
<a-input v-trim v-model="form.xxx" />

js 复制代码
<input v-trim v-model="xxx" />
  • 为了兼容 a-input 内部异步渲染的 input,把指令改得更稳一些(插入与更新都尝试绑定):
js 复制代码
  Vue.directive('trim', {
    inserted(el, binding, vnode) {
      const bind = () => {
        const input = el.querySelector('input,textarea');
        if (!input || input.type === 'password' || input.__vTrimBound) return;
        input.__vTrimBound = true;
        input.addEventListener('blur', () => {
          const oldValue = input.value;
          const newValue = oldValue.trim();
          if (newValue !== oldValue) {
            input.value = newValue;
            input.dispatchEvent(new Event('input', { bubbles: true }));
          }
        });
      };
      vnode.context.$nextTick(bind);
    },
    componentUpdated(el, binding, vnode) {
      vnode.context && vnode.context.$nextTick(() => {
        const input = el.querySelector('input,textarea');
        if (input && !input.__vTrimBound) {
          el.dispatchEvent(new Event('blur', { bubbles: true })); // 触发一次以绑定
        }
      });
    }
});
  1. 全局捕获 blur(无需在模板写 v-trim,对异步节点同样有效)
  • 在 main.js 添加一次性全局监听(放在创建 Vue 实例之前或之后都可):
js 复制代码
document.addEventListener('blur', (e) => {
    const t = e.target;
    if (!t) return;
    const isTextInput = (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA');
    if (!isTextInput || t.type === 'password') return;
    const oldValue = t.value;
    const newValue = typeof oldValue === 'string' ? oldValue.trim() : oldValue;
    if (newValue !== oldValue) {
      	t.value = newValue;
      	t.dispatchEvent(new Event('input', { bubbles: true }));
    }
}, true);
  • 优点:覆盖所有动态/第三方输入,省去模板标记。

  • 注意:如有不希望被裁剪的特例,需要在逻辑中额外过滤(比如通过 data-no-trim 属性跳过)。

建议

  • 快速落地:选方案 2 全局监听,一行代码解决全面生效问题。

  • 精细控制:选方案 1,在需要的输入上显式使用 v-trim,并保留增强后的指令实现。

相关推荐
~无忧花开~39 分钟前
JavaScript学习笔记(十五):ES6模板字符串使用指南
开发语言·前端·javascript·vue.js·学习·es6·js
正义的大古4 小时前
OpenLayers的OGC服务 -- 章节一:WMS服务详解
前端·javascript·vue.js·openlayers
_Legend_King4 小时前
高德地图实现经纬度及获取编码、所属行政区、GIS
javascript·vue.js·elementui
java水泥工4 小时前
师生健康信息管理系统|基于SpringBoot和Vue的师生健康信息管理系统(源码+数据库+文档)
数据库·vue.js·spring boot
拜无忧5 小时前
【教程】Vue 3 项目架构终极指南:一份面向新手的、高性能的实战教程
前端·vue.js
岁月宁静6 小时前
Vue3.5 + SSE 构建高可用 AI 聊天交互层 ——chat.js 模块架构与实现
前端·vue.js·人工智能
前端 贾公子6 小时前
Vue3 defineModel === 实现原理
前端·javascript·vue.js
一路上__有你6 小时前
闲来无事,写一篇文章吧!
前端·javascript·vue.js
keep_di7 小时前
05-vue3+ts中axios的封装
前端·vue.js·ajax·typescript·前端框架·axios
一只小风华~8 小时前
命名视图学习笔记
前端·javascript·vue.js·笔记·学习