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

Posted 2023-02-22

【中文标题】数字输入中的 Google Chrome Android 逗号 (Bootstrap-Vue)

【英文标题】：Google Chrome Android Commas in numeric Input (Bootstrap-Vue)

【发布时间】：2021-08-17 09:06:43

【问题描述】：

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

【问题讨论】：

您应该使用b-form-input 上的formatter 属性来定义特定格式：bootstrap-vue.org/docs/components/…

【参考方案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://***.com/a/3097076/8816585

【讨论】：

您好！对不起，我的回答迟了，我非常忙。这仍然不起作用。它适用于桌面设备，但不适用于移动设备。这有点难以描述，但仍然可以输入2.，但只要我输入下一个数字2. -> 2.4 -> 24，这个数字至少会自行纠正。遗憾的是，这仍然不能解决我遇到的问题，因为仍然可以输入逗号和点。

如果<b-form-input>是幕后的输入，你应该把inputMode写成inputmode。不确定这个错字是否会破坏整个事情。还要检查这个，它在 ios 上是否像您期望的那样工作：codesandbox.io/embed/…？

老实说，我还不能在 iOS 设备上测试它（因为我目前没有）。错字没有任何区别。移动 Chrome 会打开正确的“数字键盘”键盘。字面上只能输入数字 0-9 和逗号/点。对我来说，当我输入小数时，数字似乎被缓冲然后刷新，一旦它再次有效（如果我在句点之后添加一个数字，或者删除句点）。因此，在缓冲时间范围内不会调用验证器。我在网上找不到关于这个假设的任何信息。

是的，它被“刷新”了，因为正则表达式验证了整个字符串并去除了无用的部分。所以，这里是后期输入的问题。不确定是否有办法直接阻止 html 输入，但您可以在此处查看按下的键：forum.vuejs.org/t/how-to-cancel-a-keypress/5922/2