CODEWITHSUNDEEP
javascriptnode.jsvue.jsquasar-framework
kzaiwo
kzaiwo

Reputation: 1768

Restrict input with max length

I need to have an input boxes that only accepts hex characters and need to supply a max length.

I am able to handle accepting hex only but where I am having issues with is when I paste a string - the invalid characters are being counted as well in the max length.

Here is what I currently have:

<q-input outlined v-model="text" label="Outlined" @input="acceptHexOnly" maxlength="6"></q-input>

And:

acceptHexOnly () {
  console.log(this.text)
  this.$nextTick(() => {
    this.text = this.text.replace(/[^a-fA-F0-9\n\r]+/g, '').toUpperCase()
  })
}

So when pasting string:

xabx12xcdxef

Help!

Fiddle: https://codepen.io/keechan/pen/qBZoXPj

Upvotes: 1

Views: 2413

Answers (1)

Jaromanda X
Jaromanda X

Reputation: 1

remove the maxlength property from the input field and add the .slice(0, 6) as follows

acceptHexOnly () {
  console.log(this.text)
  this.$nextTick(() => {
    this.text = this.text.replace(/[^a-fA-F0-9\n\r]+/g, '').toUpperCase().slice(0, 6)
  })
}

Upvotes: 2

Related Questions