仅接受十六进制输入

Question

I am trying to create an input box that only accepts Hex characters [A-Fa-f0-9] .

I know there are a lot of options but have found none that ticks all my checkboxes.

• Need to restrict actual user input (so characters other than A-Fa-f0-9 will NOT be allowed entry/keypress/paste
  • I know this can be done through keyup/keydown/onchange event, but I need this to be enabled globally, more elegant solution
• Another option is the input pattern , but this still allows user entry of 'invalid' characters, will just display later on that the validation has failed.

My thoughts:

• Top choice: If it is possible to extend the input type:

<input type="hex">

• If possible to have a vue directive for this (supposing q-input is my component):

<q-input v-hex>

So I created this vue directive that removes all non-hex characters and converts letters it to uppercase:

Vue.directive('hex', {
  update: function (el, binding) {
        console.log('Input ' + binding.value)
    
    var newVal = binding.value.replace(/[^a-fA-F0-9\n\r]+/g, '')
      console.log('New Hex Only Val = ' + newVal.toUpperCase())

    binding.value = newVal
  }
})

But it doesn't update the parameter passed in the v-model (parameter holding the binding.value ).

Here is my fiddle: https://jsfiddle.net/keechan/nade9cy0/3/

Sample input -> expected output:

• 123abc -> 123ABC
• 12hf23dn -> 12F23D

How can I update its respective v-model parameter? Please note that this directive will be used globally so no hardcoding anywhere.

Anyone help? Thanks

Answer 1

Vue.directive('hexonly', {
    bind(el, binding, vnode) {
        const vm = vnode.componentInstance;
        el.__unbindHexonly = vm.$watch('value', value => {
            vm.__emitValue(value.replace(/[^a-fA-F0-9\n\r]+/g, '').toUpperCase());
        }, { immediate: true });
    },
    unbind(el) {
        el.__unbindHexonly && el.__unbindHexonly();
    }
});

https://jsfiddle.net/6bw0zvdm/

Quasar uses some deferred model update magic, thus using specific private method __emitValue ( source )

By the way, you don't need to specify directive expression ( "txt" ), v-hexonly will work.