如何禁用输入类型编号上的所有点？ 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是一个数字，并且与框中的文本不完全相同。

特别是，如果框中的文本不是有效的数字，则内部值为空。当输入'。'时，值不会改变：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>