No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Q-Input Character Restriction

    Framework
    2
    3
    1084
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • K
      keechan last edited by 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 1 Reply Last reply Reply Quote 0
      • qyloxe
        qyloxe @keechan last edited by

        @keechan have you tried to customize this:

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

        ?

        K 1 Reply Last reply Reply Quote 0
        • K
          keechan @qyloxe last edited by

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

          1 Reply Last reply Reply Quote 0
          • First post
            Last post