谷歌浏览器安卓版在数字输入框中使用逗号（Bootstrap-Vue）

Question

首先：这个问题只出现在Google Chrome for Android (90.0.4430.210)上，其他浏览器没有此问题。

我们有一个输入框，它应该只能输入数字。我们的输入框大概长这样。

<b-form-input
  v-model="manualInput"       
  class="text-center text-primary bold font-weight-bold"     
  id="manInput"
  type="number"
  inputMode="numeric"
  pattern="[0-9]*"
  min="1"
  max="20"
  @keypress="checkValidation($event)"
  @keyup="checkValidation($event)"
  @mouseup="checkValidation($event)"
  @paste="onPaste($event)"
/>

（“onPaste”事件并不重要，它基本上是阻止用户粘贴任何内容）

private checkValidation(evt) {
  console.log(this.manualInput);

  //Check if there is an input
  if (this.manualInput.length) {
    //At least one number
    var stamps: number = +this.manualInput;
    //Check if the input is valid (just in case)
    if (stamps < this.min || stamps > this.max || !this.manualInput.match("[0-9]{1,3}")) {
      //Input is invalid
      this.showAlert = true;
      this.isValid = false;
    } else {
      //Input is valid
      this.showAlert = false;
      this.isValid = true;
    }
  } else {
    //No content
    this.showAlert = false;
    this.isValid = false;
  } 
}

就如我之前所说，这在所有桌面浏览器、Firefox（移动版）和Safari（移动版）上都可以完美运行。但是在Android上，可以输入逗号和点号！

现在让我们看看奇怪的部分：我试图在函数的第一行用this.manualInput.replace(".", "").replace(",", "")替换逗号和点号。但是，当您只输入一个逗号时，输入字符串仍然为空。当我在控制台中打印字符串时，它会打印出一个空字符串，即使我输入了逗号。只要我输入数字，逗号就会出现在控制台中。显然，对于用户来说这很糟糕，因为它似乎他们可以输入逗号。如果有人知道为什么会发生这种情况以及我如何防止它，我将非常高兴。

- Zumpel

---

你应该更可能地使用b-form-input上的formatter属性来定义特定格式：https://bootstrap-vue.org/docs/components/form-input#comp-ref-b-form-input-props - kissu

Answer 1

您可以像这样使用格式化程序：https://bootstrap-vue.org/docs/components/form-input#formatter-support

<b-form-input
  id="input-formatter"
  v-model="text1"
  placeholder="Enter your name"
  :formatter="formatter"
></b-form-input>

<script>
  export default {
    data() {
      return {
        text1: ''
      }
    },
    methods: {
      formatter(value) {
        return value.split(/ /)[0].replace(/[^\d]/g, '')
      }
    }
  }
</script>

正则表达式取自这里：https://dev59.com/HHA75IYBdhLWcg3wy8fr#3097076。

- kissu

---

你好！很抱歉回复晚了，我非常忙。这个还是不行。它在桌面设备上可以运行，但在移动设备上不行。很难描述，但仍然可以输入 2.，但至少数字会自动更正，当我输入下一个数字时 2. -> 2.4 -> 24。不幸的是，这仍然没有解决我的问题，因为仍然可以输入逗号和点。 - Zumpel

如果<b-form-input>是背后的输入框，请将inputMode编写为inputmode。不确定这个打字错误是否会破坏整个功能。还要检查一下，在iOS上是否按预期工作：https://codesandbox.io/embed/ios-force-numeric-keypad-on-input-typenumber-demo-41dkz?view=preview&hidenavigation=1&theme=dark&fontsize=14？ - kissu

我目前还无法在iOS设备上进行测试（因为我目前没有这样的设备）。打字错误并不会有任何影响。移动版Chrome打开了正确的“数字键盘”。只能输入数字0-9和逗号/点号。对我来说，当我输入小数点时，数字似乎被缓冲，然后在它再次有效时被清除（如果我在小数点后面添加一个数字或删除小数点）。因此，在缓冲时间内验证器不会被调用。我在网上找不到任何关于这个假设的信息。 - Zumpel

是的，它被“刷新”了，因为正则表达式验证整个字符串并剥离无用部分。所以，这是一个后输入的问题。不确定是否有直接防止HTML输入的方法，但您可以像这里一样观察按下的键：https://forum.vuejs.org/t/how-to-cancel-a-keypress/5922/2 - kissu