如何在 vue.js 2 上使用 keyup 禁用点？答案

【问题标题】：How can I disable dot using keyup on vue.js 2?如何在 vue.js 2 上使用 keyup 禁用点？
【发布时间】：2018-03-20 05:52:09
【问题描述】：

我尝试这样：

<template> 
    ...
    <input type="number" class="form-control" v-model="quantity" min="1" v-on:keyup="disableDot">
    ...                           
</template>
<script>
    export default{
        ...
        methods:{
            disableDot: function(evt) {
                evt = (evt) ? evt : window.event
                let charCode = (evt.which) ? evt.which : evt.keyCode
                if (charCode === 190) {
                    evt.preventDefault()
                } 
                else {
                    return true;
                }
            }

        }
    }
</script>

如果代码执行后我输入点(.)，它仍然可以

我想禁用点。所以用户不能输入点

我该怎么做？

【问题讨论】：

你应该使用正则表达式验证。
您可以check here，允许输入所需的字符。对于 html5 使用 pattern[0-9] 和 replace method
只需使用v-on:keydown 而不是keyup。除此之外，您的代码很好
@Phil, v-on:keydown 在移动设备中无法正常工作。在移动端，它仍然可以输入点。不应该
@Yash, keydown 在移动设备中无法正常工作。 pattern 不工作在 input type number

标签： javascript vue.js vuejs2 vue-component vuex

【解决方案1】：

我不知道它是否有帮助，但这是我对您问题的解决方案。

new Vue({
  el: '#app',
  data: {
    quantity: ''
  },
  methods: {
    disableDot (e) {
      if (e.charCode === 46) {
        e.preventDefault()
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>

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

【讨论】：

你为什么改变你的答案？您使用watch 的第一个答案是正确的。您的第二个答案不要使用input type="number"。我想使用input type="number"。没有input type="text"
如果你在input type=number中加倍dot，数量将为NaN。所以这不是一个好的解决方案。另一种使它起作用的方法是定义至少一个变量-oldQuantity，但这会很复杂。并且使用watch 会导致永无止境的循环，因为自我观察会改变价值。
但是，我找到了非常好的解决方案，它适用于移动设备。
我还想使用input type="text" 更改它。但这是我客户的要求
编辑后的代码sn-p怎么样？它使用input type="number"，并且工作正常:)