inputtextallow and inputtextblock

inputtextallow.js

Vue.component( 'inputtextallow' , {
    template:'<input type="text" :value="value" @focus="selectField($event)" @input="input($event.target.value)" @change="change" @keyup="keyup" @keydown="keydown($event)" @keypress="keypress" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" >',
    props:['value','allow'],
    data(){
        return {
            allowset:{
                c65:true,
                c66:true,
                c69:true,
                c84:true
            }
        }
    },
    created(){
        if( this.allow ){
            var b = this.allow.split("");
            for (var i = 0; i < b.length; i++) {
                this.allowset[ "c" + b[i].charCodeAt(0) ] = true;
            }
        }
    },
    methods:{
        input( newInput ){
            this.$emit('input', newInput);
        },
        selectField( event ){
            if( brp.model.lastElementFocus != this.$el ){
                brp.model.lastElementFocus = this.$el;
                this.$el.select();
            }            
        },
        change(){
            //console.log( 'change: ' + this.value );
            if( this.$el.maxlength && this.$el.value.length > this.$el.maxlength ){
                this.$el.value = this.$el.value.slice( 0 , this.$el.maxlength );
            }
        },
        keydown( event ){
            console.log( 'keydown: ' + event.key );
            console.log( '   code: ' + event.key.charCodeAt(0) );
            if( this.allowset[ "c" + event.key.charCodeAt(0) ] != undefined ){
                console.log( 'allowset hit! ' + this.allowset[ "c" + event.key.charCodeAt(0) ] );
                if( this.allowset[ "c" + event.key.charCodeAt(0) ] == true ){
                    return true;
                }
            }
            event.preventDefault();
            return false;
        },
        keyup(){
            //console.log( 'keyup: ' + this.value );
            if( this.$el.maxlength && this.$el.value.length > this.$el.maxlength ){
                this.$el.value = this.$el.value.slice( 0 , this.$el.maxlength );
            }
        },
        keypress(){
            //console.log( 'keypress: ' + this.value );
            if( this.$el.maxlength && this.$el.value.length >= this.$el.maxlength ){
                return false;
            }
            return true;
        }
    }
})

inputtextblock.js

Vue.component( 'inputtextblock' , {
    template:'<input type="text" :value="value" @focus="selectField($event)" @input="input($event.target.value)" @change="change" @keyup="keyup" @keydown="keydown($event)" @keypress="keypress" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" >',
    props:['value','block'],
    data(){
        return {
            blockset:{}
        }
    },
    created(){
        if( this.block ){
            var b = this.block.split("");
            for (var i = 0; i < b.length; i++) {
                this.blockset[ "c" + b[i].charCodeAt(0) ] = false;
            }
        }
    },
    methods:{
        input( newInput ){
            this.$emit('input', newInput);
        },
        selectField( event ){
            if( brp.model.lastElementFocus != this.$el ){
                brp.model.lastElementFocus = this.$el;
                this.$el.select();
            }            
        },
        change(){
            //console.log( 'change: ' + this.value );
            if( this.$el.maxlength && this.$el.value.length > this.$el.maxlength ){
                this.$el.value = this.$el.value.slice( 0 , this.$el.maxlength );
            }
        },
        keydown( event ){
            console.log( 'keydown: ' + event.key );
            console.log( '   code: ' + event.key.charCodeAt(0) );
            if( this.blockset[ "c" + event.key.charCodeAt(0) ] != undefined ){
                console.log( 'blockset hit! ' + this.blockset[ "c" + event.key.charCodeAt(0) ] );
                if( this.blockset[ "c" + event.key.charCodeAt(0) ] == false ){
                    event.preventDefault();
                    return false;
                }
                //return this.blockset[ "c" + event.key.charCodeAt(0) ];
            }
            return true;
        },
        keyup(){
            //console.log( 'keyup: ' + this.value );
            if( this.$el.maxlength && this.$el.value.length > this.$el.maxlength ){
                this.$el.value = this.$el.value.slice( 0 , this.$el.maxlength );
            }
        },
        keypress(){
            //console.log( 'keypress: ' + this.value );
            if( this.$el.maxlength && this.$el.value.length >= this.$el.maxlength ){
                return false;
            }
            return true;
        }
    }
})

use...

Address line without special chars
<inputtextblock :block.once="`!_$%#@^*()?][=+<>?/|\&" ></inputtextblock>

Zip
<inputtextallow max-length="10" :allow.once="0123456789-" ></inputtextblock>