javascript - 如何禁用输入类型数字上的所有点？ vue.js 2

Question

我的html代码是这样的:

<div id="app">
  <input type="number" v-model="quantity"/>
</div>

我的 vue 组件是这样的:

new Vue({
  el: '#app',
  data: {
    quantity: ''
  },
  watch: {
    quantity (val) {
      this.quantity = val.replace('.', '')
    }
  }
})

演示和完整代码如下:https://jsfiddle.net/50wL7mdz/67375/

例如

我输入10.2，它会自动变成102

如果我输入10..2，它不会自动成为102

所以如果有多个点，它就不起作用

如何解决这个问题？

Answer 1

因为您使用的是 type="number"，浏览器正在执行一些内部处理，因此输入的 value (绑定(bind)到您的变量)是一个数字，与框中的文本不完全相同。

特别是，如果框中的文本不是有效数字，则内部值为空。当您键入一个“.”时，该值不会改变:10. 和 10 是相同的数值。当您键入第二个“.”时，该值将变为无效，因此内部值为空。有点令人困惑的是，您在输入中输入的内容仍然可见，但是 there is no way to get at it .

您的选择是停止使用 type="number" 在这种情况下您的代码将按编写的方式工作(但您没有用于更改值的向上和向下箭头功能) ，或者做一些棘手的事情。

更新:下面的解决方案通过强制使用号码的规范化版本来相对有效地工作。需要注意的是，每次进行更改时，光标都会移动到数字的末尾。你可以解决这个问题，但是 it's somewhat complicated所以我没有在这里这样做。

new Vue({
  el: '#app',
  data: {
    quantity: ''
  },
  computed: {
    ppQuantity: {
      get() {
        return this.quantity;
      },
      set(val) {
        this.quantity = '';
        this.$nextTick(() => {
          this.quantity = val.replace('.', '');
        });
      }
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <input type="number" v-model="ppQuantity">
</div>