Javascript 为什么keydown在移动设备中不起作用？vue.js 2

我试着这样：

<template> 
    ...
    <input type="number" class="form-control" v-model="quantity" min="1" v-on:keydown="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 || charCode === 189 || charCode === 187) {
                    evt.preventDefault()
                } 
                else {
                    return true
                }
            }

        }
    }
</script>

...
...                           
导出默认值{
...
方法：{
禁用点：功能（evt）{
evt=（evt）？evt:window.event
让charCode=（evt.which）？evt.which:evt.keyCode
if（charCode==190 | | charCode==189 | | charCode==187）{
evt.preventDefault（）
} 
否则{
返回真值
}
}
}
}

如果代码被执行并且我输入了点（.），它仍然可以

在dekstop中，它已禁用。但在移动设备中，它不会禁用

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

我怎么做

注意

---

在dekstop中，代码是有效的。但在移动设备中，代码不起作用。点（.）no disable in mobile

问题在于带有“keydown”或“keyup”的按键代码在不同浏览器中似乎不一致。也许操作系统也有影响。您可以在各种浏览器和移动设备上进行测试

我想您可以使用

v-on:keypress

事件来获得更高的一致性。在我的快速（不完整的移动）测试中，以下内容始终返回“46”。一个快速的警告，我注意到在我的android键盘上的firefox mobile上键入“.”时，我收到了两个按键事件

//in template
<input type="number"  v-on:keypress="capturePress($event)">

//in methods
capturePress: function(event) {
    console.log(event.charCode);
}

---

使用观察者对我来说效果最好。应该是这样的：

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

        }

        watch: {
          "quantity"(value) {
            this.disableDot();
          }
        },
    }
</script>

...
...                           
导出默认值{
...
方法：{
禁用点：功能（evt）{
evt=（evt）？evt:window.event
让charCode=（evt.which）？evt.which:evt.keyCode
if（charCode==190 | | charCode==189 | | charCode==187）{
evt.preventDefault（）
} 
否则{
返回真值
}
}
}
观察：{
“数量”（价值）{
这个.disableDot（）；
}
},
}

我发现了安卓设备的真正问题， 您应该如下所示禁用表单的自动完成：

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

        }

        watch: {
          "quantity"(value) {
            this.disableDot();
          }
        },
    }
</script>

 <form autocomplete="off" action="/action_page.php">