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

Question

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

标签： javascripthtmlvue.jsbootstrap-vuehtml-input

Answer 1

您可以使用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