一、原生环境
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
