VUE通过自定义指令，控制输入框只允许输入数字和字母

参考代码

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 染指悲剧