数字输入中的 Google Chrome Android 逗号Bootstrap-Vue

如何解决数字输入中的 Google Chrome Android 逗号Bootstrap-Vue

首先：除了 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(",","") 替换函数第一行中的逗号和点。但是，当您只输入一个逗号时，输入字符串仍然是空的。当我在控制台中打印字符串时，即使我输入了逗号，它也会打印一个空字符串。一旦我输入一个数字，逗号就会出现在控制台中。这显然对用户不利，因为看起来他可以输入逗号。如果有人知道为什么会发生这种情况以及我如何预防它，我会很高兴。

解决方法

您可以使用 formatter，如下所示：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://stackoverflow.com/a/3097076/8816585