Vue2中如何实现输入框粘贴内容后自动去除字符串内的空格

我有两个输入框，均需要实现粘贴内容时去除字符串中的空格。我最初使用event.clipboardData.setData进行处理，但没有生效。之后我尝试直接给状态变量赋值处理后的值，却出现原始粘贴内容和去空格后内容同时出现的问题，以下是我的代码便于定位问题：

<template>
  <span>
    <input class="form-control inputHeight"
        @keydown.space.prevent
        @paste.space="remove_on_paste"
        v-model="floatingData.from_id">
    <input class="form-control inputHeight"
        @keydown.space.prevent
        @paste.space="remove_on_paste"
        v-model="floatingData.to_id">
  </span>
</template>

第一次尝试写法（无效果） #

new Vue({
  data() {
    return {
      floatingData: {
        from_id: "",
        to_id: ""
      }
    }
  },
  
  methods: {
    // 粘贴时移除空格
    remove_on_paste(event) {
        let main_text = event.clipboardData.getData("text");
        event.clipboardData.setData("text", main_text.replace(/\D/g, ""));
    }
  }
})

运行效果：

第二次尝试写法（出现重复内容） #

new Vue({
  data() {
    return {
      floatingData: {
        from_id: "",
        to_id: ""
      }
    }
  },
  
  methods: {
    // 粘贴时移除空格
    remove_on_paste(event) {
        let main_text = event.clipboardData.getData("text");
        this.floatingData.from_id = main_text.replace(/\D/g, "");
    }
  }
})

运行效果：
#

两个问题的核心原因如下：

1. 第一次写法不生效：首先@paste.space是错误用法，.space修饰符仅对键盘事件生效，粘贴事件不识别该修饰符；其次修改clipboardData后没有阻止默认粘贴行为，浏览器仍然会读取原始剪贴板内容插入输入框。
2. 第二次写法内容重复：手动给状态赋值后，浏览器默认粘贴行为还会把原始内容再插入一次，两次赋值叠加就出现了重复内容，同时写死赋值给from_id会导致第二个输入框粘贴也修改第一个输入框的值，逻辑不通用。

正确完整的修改代码如下：

<template>
  <span>
    <input class="form-control inputHeight"
        @keydown.space.prevent
        @paste="remove_on_paste($event, 'from_id')"
        v-model="floatingData.from_id">
    <input class="form-control inputHeight"
        @keydown.space.prevent
        @paste="remove_on_paste($event, 'to_id')"
        v-model="floatingData.to_id">
  </span>
</template>

new Vue({
  data() {
    return {
      floatingData: {
        from_id: "",
        to_id: ""
      }
    }
  },
  methods: {
    remove_on_paste(event, field) {
      // 阻止默认粘贴行为，避免原始内容插入
      event.preventDefault()
      // 读取剪贴板文本做过滤，仅去空格用/\s/g，仅保留数字用/\D/g
      const rawText = event.clipboardData.getData("text")
      const processedText = rawText.replace(/\s/g, "")
      // 给对应输入框的绑定字段赋值
      this.floatingData[field] = processedText
    }
  }
})

如果需要严格限制仅能输入数字，还可以额外绑定@input事件做实时过滤，覆盖用户手动输入的场景。 #

内容的提问来源于stack exchange，提问作者Niaz Estefaie