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