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.