参考代码
html
<van-field id="valueInput" v-model="value" v-Alphabet
placeholder="请输入"/>
js
import Vue from "vue";
//自定义指令 ,只能输入字母和数字
Vue.directive('Alphabet', {
inserted: function (el) {
const input = el.querySelector('#valueInput');
input.onkeyup = function (e) {
input.value = input.value.replace(/[^A-Za-z0-9]/g, '')
}
input.onblur = function (e) {
input.value = input.value.replace(/[^A-Za-z0-9]/g, '')
}
}
});
效果
- 有闪烁
- 当用户输入数字和字母意外内容,会被立马删掉
- 在手机端效果比较好
参考文档
vue自定义指令之(只能输入字母和数字) CSDN 染指悲剧