限制最大长度的输入

Question

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

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

这是我目前拥有的：

<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

求助！

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

Answer 1

从输入字段中删除 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)
  })
}

限制最大长度的输入

Restrict input with max length

javascript

node.js

vue.js

quasar-framework