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