如何在不使用input元素的情况下捕获Vuejs中的任何按键事件

How to capture any keypress event in Vuejs without using input element

本文关键字：Vuejs 任何按 事件 情况下 元素 input      更新时间：2023-09-26

我正在制作一款游戏，我想让用户输入一个特定的单词，然后我想检查这个特定的单词是否被按下了。如果按了这个词，我就取下一个词。目前我正在使用的形式，并已使用v-model如下所示:

 <input v-model="inputSpell">

在Vue实例中，我使用了watch属性，它不断检查输入的单词是否与请求的单词匹配。

watch : {
    inputSpell : function() {
        var spellCount = this.spellCount;
        var inputSpell = this.inputSpell.toUpperCase();
        var presentSpell = this.presentSpell;
        console.log("Spell Count " + spellCount);
        console.log("Input Spell " + inputSpell);
        console.log("Present Spell" + presentSpell);
        if (inputSpell.length === 3 && inputSpell === presentSpell) {
            this.$set(this, 'inputSpell', '');
            if (spellCount === 3) {
                return this.completeCombo();
            }
            return this.fetchSpell(spellCount);
        }
        if (inputSpell.length >=3) {
            this.$set(this, 'inputSpell', '');
        }
    }
}

我想到了三个主意:

  1. 上面我所做的是显示表单。用户在该表单中输入单词。看起来不太好。

  2. 将输入元素隐藏并在游戏加载时聚焦于它。但缺点是，如果用户单击页面上的任何地方，窗体的焦点就会丢失。

  3. 创建一个自定义指令或调用一个方法来捕获按键事件以检查单词。

任何帮助将不胜感激。

谢谢。

要在不使用输入的情况下捕获按键，您可以在生命周期钩子(例如"mounted")中包含一个标准事件侦听器，如下所示:

mounted() {
    let self = this; 
    window.addEventListener('keyup', function(ev) {
        self.myMethod(ev); // declared in your component methods
    });
}

很可能，您希望在创建组件时添加事件侦听器，并在组件销毁时删除它。否则，如果在会话中多次加载组件，将会有多个重复的事件侦听器响应单个事件。

methods: {
    keyDownHandler(e) {
        console.log(e.key)
        // Your handler code here
    },
},
created() {
    window.addEventListener('keydown', this.keyDownHandler)
},
destroyed() {
    window.removeEventListener('keydown', this.keyDownHandler)
},

完成Stephen Lake的注释，你可以直接在输入标签

上使用v-on指令
<input v-model="inputSpell" v-on.keyup="inputSpell">
or
<input v-model="inputSpell" @keyup="inputSpell">


inputSpell : function(event) {
    let value = event.target.value
    var spellCount = this.spellCount;
    var inputSpell = value.toUpperCase();
    var presentSpell = this.presentSpell;
    console.log("Spell Count " + spellCount);
    console.log("Input Spell " + inputSpell);
    console.log("Present Spell" + presentSpell);
    if (inputSpell.length === 3 && inputSpell === presentSpell) {
        this.$set(this, 'inputSpell', '');
        if (spellCount === 3) {
            return this.completeCombo();
        }
        return this.fetchSpell(spellCount);
    }
    if (inputSpell.length >=3) {
        this.$set(this, 'inputSpell', '');
    }
}

请注意，从用户的角度来看，自动更改输入值并不能提供最佳体验(我个人认为这非常令人沮丧)。

相关文章：