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,并保留增强后的指令实现。

相关推荐
因吹斯汀2 小时前
一饭封神:当AI厨神遇上你的冰箱,八大菜系大师在线battle!
前端·vue.js·ai编程
崔璨2 小时前
详解Vue3的响应式系统
前端·vue.js
摸鱼的鱼lv2 小时前
🔥 Vue.js组件通信全攻略:从父子传值到全局状态管理,一篇搞定所有场景!🚀
前端·vue.js
lichong9512 小时前
【混合开发】vue+Android、iPhone、鸿蒙、win、macOS、Linux之dist打包发布在Android工程asserts里
android·vue.js·iphone
超人不会飛3 小时前
vue3 markdown组件|大模型应用专用
前端·vue.js·人工智能
VillenK4 小时前
用插件的方式注入Vue组件
前端·vue.js
等什么君!4 小时前
如何 正确使用 nrm 工具 管理镜像源
vue.js
warder4 小时前
字典状态管理:基于 Vue3 + Pinia 的工程化实践
vue.js
人工智能训练师5 小时前
在Ubuntu中如何使用PM2来运行一个编译好的Vue项目
linux·运维·服务器·vue.js·ubuntu·容器
浩星5 小时前
iframe引入界面有el-date-picker日期框,点击出现闪退问题处理
前端·vue.js·elementui