input、textarea禁止输入空格，并绑定回车事件

一、原生环境

1. 禁止输入空格

<input type="text" v-model="value" οnkeyup="this.value=this.value.replace(/\s+/g,'')" />

<textarea type="text" v-model="value" οnkeyup="this.value=this.value.replace(/\s+/g,'')" />

2. 绑定回车键

<input type="text" v-model="value" @keydown.enter="confim" />

<textarea type="text" v-model="value" @keydown.enter="confim" />

注意1：textarea 回车会换行，所以需要处理一下，回车目的是提交，可以将内容清空。
注意2：vue 中的 trim() 方法没有用，不要用那个方式。

confim() {
  this.value = ''
  ...
}

二、第三方UI组件库环境

以 Vant 举例（其它组件库原理相同），在组件库中，上面的方法无效，需要采用其它方法。

1. 禁止输入空格

<van-field v-model="form.data" :update:model-value="(form.data = form.data.replace(/\s+/g, ''))" />

如果觉得一个一个禁止太麻烦，也可以全局统一禁止。

vue2–main.js

import Vue from "vue";
import { Field } from "vant";

Vue.use(Vant);
Vue.component(Field.name, {
  extends: Field,
  props: {
    formatter: {
      type: Function,
      default: function (value) {
        return value.replace(/\s+/g, "");
      },
    },
  },
});

2. 绑定回车键

与上面一样，使用 @keydown.enter 即可绑定。

<van-field v-model="form.data" @keydown.enter="confim" />

END