在写之前需要知道几个功能对象的作用;
首先输入框输入的情况有键盘输入和粘贴输入的情况
用到的组件有:
input.onblur-onblur: 事件会在对象失去焦点时发生。Onblur 经常用于Javascript验证代码,一般用于表单输入框。详情
input.onkeyup:onkeyup 事件会在键盘按键被松开时发生。详情
接着就开始编写vue的自定义指令代码了:
html
<el-input id="valueInput" v-model="value" v-Alphabet placeholder="输入框"></el-input>
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-Z0-9]/g, '')
}
input.onblur = function (e) {
input.value = input.value.replace(/[^A-Z0-9]/g, '')
}
}
});
效果就是输入不符合规则的字符会自动清除。