如何限制多个输入字段使用v模型以仅接受Vue.js中的数字每个输入字段都没有重复代码？

问题描述

我有多个输入字段，我想将它们限制为仅接受数字（在Vue.js中）。
我想禁止用户输入除0-9以外的任何字符。 我已经通过执行此操作成功完成了（此解决方案复制粘贴证明）：

Vue.js模板中的代码：

<input type="text" name="priceMax" class="input" @input="correctNumberInput" />

删除数字以外的所有内容的方法：

correctNumberInput: function(event){   
          event.target.value = event.target.value.replace(/[^0-9]/g,"");
        }

这在多个字段上都工作得很好。

这是问题所在： 出于不同的原因，我需要在这些输入上使用 v-model 领域。添加 v-model 后，我的方法不再起作用。我猜这是因为v模型还在后台使用了输入事件。因此，仅添加“ v-model”会阻止其工作：

<input type="text" name="priceMax" class="input" @input="correctNumberInput" v-model="priceMax" />

我想到的解决方案很少，但是所有解决方案都包含很多重复的代码。

例如，我可以为每个输入字段添加观察者，但这将是很多重复的代码（因为我需要为每个输入字段都执行此操作）。我有5个输入字段，因此基本上我需要写5个几乎相同的观察者。我想避免这种情况的发生，例如...

watch:{
   number(){
      this.priceMax = this.priceMax.replace(/[^0-9]/g,"");
   }
}

有什么办法可以解决它并使它像解决方案 一样简单，而无需重复代码 ？ 也很高兴拥有防复制粘贴的解决方案。欢迎所有建议！预先感谢！

解决方法

也许您可以尝试以下方法：

    [Serializable]
    public class VarMap
    {
            public byte var1;
            public int64 var2;
            public int32 var3;
    }

从该站点：click。

我尝试测试一些代码。这是我所拥有的（link to the example）：

<template>
  <div>
    <div>
      <input
        type="text"
        name="priceMin"
        class="input"
        v-model="priceMin"
        @input="correctNumberInput"
      >
      <label v-html="priceMin"></label>
    </div>
    <div>
      <input
        type="text"
        name="priceMax"
        class="input"
        v-model="priceMax"
        @input="correctNumberInput"
      >
      <label v-html="priceMax"></label>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyInput",data: () => {
    return {
      priceMin: "",priceMax: ""
    };
  },methods: {
    correctNumberInput: function(event,data) {
      const name = event.target.name;
      let value = String(this[name]).replace(/[^0-9]/g,"");
      if (value) {
        this[name] = parseInt(value,10);
      } else {
        this[name] = "";
      }
    }
  }
};
</script>

<style scoped>
input {
  border: 1px solid black;
}
</style>

这是代码：

correctNumberInput: function(event,data) {
  const name = event.target.name;
  let value = String(this[name]).replace(/[^0-9]/g,"");
  if (value) {
    this[name] = parseInt(value,10);
  } else {
    this[name] = "";
  }
}

因此我使用了您的函数，但我没有更改event.target.value，而是更改了data。因此，我需要知道该数据的名称，这就是为什么我在输入字段（name）中使用const name = event.target.name;属性的原因

更新

如果我们有input type=number，则它在@input回调中具有奇怪的（空）值。看来，最好使用键盘过滤器（example here）：

具有键盘过滤器的主要思想：

filterDigitKeys: function(event) {
  const code = window.Event ? event.which : event.keyCode;
  const isSpecial =
    code === 37 ||
    code === 39 ||
    code === 8 ||
    code === 46 ||
    code === 35 ||
    code === 36;
  const isDigit = code >= 48 && code <= 57;
  const isKeypad = code >= 96 && code <= 105;
  if (!isSpecial && !isDigit && !isKeypad) {
    // if not number or special (arrows,delete,home,end)
    event.preventDefault();
    return false;
  }
}

并将其附加到输入：

<input type="number" min="0" name="numberInput" class="input"
    v-model.number="numberInput" @keydown="filterDigitKeys">

注意：如果仅保留@keydown处理程序，则不会过滤插入到输入中的文本（但是ctrl + v仍然无法正常工作，只能通过鼠标操作）。

input javascript v-model vue.js