javascript - How to capture any keypress event in Vuejs without using input element - Stack Overflow

admin管理员组

文章数量:1203400

I am making kind of game in which I want user to enter a particular word and then I want to check if the particular word is pressed. If the word is pressed I will fetch the next word. Currently I am using a form and have used v-model shown below :

 <input v-model="inputSpell">

In the Vue instance I have used the watch property which constantly checks the if the input word matches the asked word.

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 thispleteCombo();
            }
            return this.fetchSpell(spellCount);
        }

        if (inputSpell.length >=3) {
            this.$set(this, 'inputSpell', '');
        }
    }
}

There are three ideas I thought of :

1. Above way what I am doing is showing the form. The user enters for word in that form. Does not look good.

2. Make the input element hidden and focus on it when the game loads. But the disadvantage is if the user click anywhere on the page the focus on the form will be lost.

3. Making a custom directive or calling a method which captures the keypress event to check for words.

Any help will be appreciated.

Thanks.

I am making kind of game in which I want user to enter a particular word and then I want to check if the particular word is pressed. If the word is pressed I will fetch the next word. Currently I am using a form and have used v-model shown below :

 <input v-model="inputSpell">

In the Vue instance I have used the watch property which constantly checks the if the input word matches the asked word.

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', '');
        }
    }
}

There are three ideas I thought of :

1. Above way what I am doing is showing the form. The user enters for word in that form. Does not look good.

2. Make the input element hidden and focus on it when the game loads. But the disadvantage is if the user click anywhere on the page the focus on the form will be lost.

3. Making a custom directive or calling a method which captures the keypress event to check for words.

Any help will be appreciated.

Thanks.

• javascript
• vue-resource
• vue.js

Share Improve this question Follow asked Oct 27, 2016 at 11:23 Sagar KariraSagar Karira 67922 gold badges88 silver badges2020 bronze badges 1

• 3 Use VueJS Key Modifiers. For any key use: v-on.keyup="someMethod()". @imcvampire your link has absolutely nothing to do with VueJS. – Stephen Lake Commented Mar 23, 2017 at 19:56

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 15

To capture a key press without using an input, you could just include a standard event listener inside your lifecycle hook ("mounted", for instance) like so:

mounted() {

    let self = this; 

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

Likely, you will want to add an event listener when then the component is created, and you will want to remove it when the component is destroyed. Otherwise, there will multiple duplicate event listeners reacting to a single event if the component is loaded more than once in a session.

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

Completing Stephen Lake's comment, you can use directly the v-on directive on the input tag

<input v-model="inputSpell" v-on.keyup="inputSpell">
or
<input v-model="inputSpell" @keyup="inputSpell">

with

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', '');
    }
}

Please note that, from a user prospective, changing automatically an input value does not provide the best experience (I personally find that very frustrating).

本文标签： javascriptHow to capture any keypress event in Vuejs without using input elementStack Overflow