Q-Input Character Restriction



  • 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!



  • @keechan have you tried to customize this:

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

    ?



  • @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.


Log in to reply