以最大长度限制输入答案

【问题标题】：Restrict input with max length以最大长度限制输入
【发布时间】：2020-09-10 07:26:14
【问题描述】：

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

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

这是我目前拥有的：

<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

【问题讨论】：

因为 xabx12 的长度为 6 - 您的替换仅发生在这些字符中 - 正如您在 console.log(this.text) 中看到的那样
是的，我明白这一点。但是我怎样才能处理一个可以接受 6 个“正确”字符的输入框呢？
不要使用 maxlength 来限制长度...使用来限制长度，也许是this.text = this.text.replace(/[^a-fA-F0-9\n\r]+/g, '').toUpperCase().slice(0,6)
这对我有用！您可以将其发布为答案以便我接受吗？谢谢！ @JaromandaX

标签： javascript node.js vue.js quasar-framework

【解决方案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)
  })
}

【讨论】：