Q-Input Character Restriction

[keechan]

Hi everyone,

Is there any way I can restrict the user to only accept hex characters (with no checking on length)?

Maybe something like <q-input type="hex">?

So far I have tried:

• creating a custom hex mask for use in :mask="HHH" but this is a bit cumbersome since length in my case should be variable (so there should be no length restriction).
• creating rules (but also does not satisfy the requirement that it should NOT even accept user input of non-hex since it accepts input but only triggers an error)
• creating my own custom directive, but can’t v-model update is a little too late (there is a lag on the update):

Vue.directive('hexonly', {
  update: function (el, binding, vnode) {
		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
    vnode.context[binding.expression] = newVal;
    el.value = newVal
    el.dispatchEvent(new Event('change')); 
  }
})

and I call it like this:
<q-input v-model=“content” v-hexonly=“content”/>

In case it helps, here is my fiddle:
https://jsfiddle.net/keechan/nade9cy0/25/

Sample input -> expected output:

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

Need to have this like this since it will be reused on multiple files.

Any thoughts?? Help!

[qyloxe]

@keechan have you tried to customize this:

https://quasar.dev/vue-components/input#Mask

?

[keechan]

@qyloxe Hello! Yes I did… But it looks like this masking is tied to a certain length (or maybe I am missing something?). In my case, they are supposed to be “unlimited length”. So I am looking for a more straightforward, cleaner implementation.