以最大长度限制输入

问题描述

我需要有一个仅接受十六进制字符并且需要提供最大长度的输入框。

我只能处理十六进制，但是我遇到问题的地方是粘贴字符串时-最大长度中也计入了无效字符。

这是我目前拥有的：

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

并且：

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

因此，在粘贴字符串时：

xabx12xcdxef

• 期望：AB12CD
• 实际：AB12

帮助！

提琴： https://codepen.io/keechan/pen/qBZoXPj

解决方法

从输入字段中删除maxlength属性，并如下添加.slice（0，6）

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