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

brgchamk 于 2023-01-04 发布在 Java

关注(0)|答案(3)|浏览(154)

我正在做一种游戏，我希望用户输入一个特定的单词，然后我想检查是否按下了特定的单词。如果按下了这个单词，我将获取下一个单词。目前我正在使用一个表单，并使用了如下所示的v模型：

<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.上面的方式我正在做的是显示的形式。用户输入的字在该形式。不好看。
1.隐藏输入元素并在游戏加载时聚焦它。但缺点是如果用户点击页面上的任何地方，表单上的焦点将丢失。
1.生成自定义指令或调用捕获按键事件的方法以检查单词。
任何帮助都将不胜感激。
谢谢。

JavaScript

来源：https://stackoverflow.com/questions/40283406/how-to-capture-any-keypress-event-in-vuejs-without-using-input-element

3条答案

按热度按时间

uubf1zoe1#

要在不使用输入的情况下捕获按键，您可以在生命周期钩子内包含一个标准事件侦听器（例如，“mounted”），如下所示：

mounted() {

    let self = this; 

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

赞(0）回复(0）举报 2023-01-04

hmmo2u0o2#

完成StephenLake的注解后，可以直接在input标记上使用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', '');
    }
}

请注意，从用户的Angular 来看，自动更改输入值并不能提供最佳体验（我个人觉得这非常令人沮丧）。

赞(0）回复(0）举报 2023-01-04

k10s72fa3#

很可能，您希望在创建组件时添加事件监听程序，并希望在销毁组件时将其删除。否则，如果在会话中多次加载组件，则会有多个重复的事件监听程序对单个事件作出React。

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

赞(0）回复(0）举报 2023-01-04

我来回答

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

3条答案

相关问题

热门标签

最新问答