为什么keydown在手机上不起作用？ Vue.js 2答案

【问题标题】：Why keydown not working in mobile? vue.js 2为什么keydown在手机上不起作用？ Vue.js 2
【发布时间】：2018-03-20 07:14:41
【问题描述】：

我尝试这样：

<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>

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

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

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

我该怎么做？

注意

在 dekstop 中，代码有效。但是在移动设备中，该代码不起作用。 dot(.) 在移动端没有禁用

【问题讨论】：

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

【解决方案1】：

我发现了 android 设备的真正问题，您应该像这样禁用表单的自动完成功能：

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

【讨论】：

【解决方案2】：

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

<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>

【讨论】：

【解决方案3】：

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

我认为您会发现使用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);
}

我还鼓励您查看整个活动，因为它也会返回。 event.code = "Period" 和 event.key = "." 虽然只有 event.key = "." 填充在移动版 Firefox 上。

console.log(event);

【讨论】：