CODEWITHSUNDEEP
javascriptvue-resourcevue.js
Sagar Karira
Sagar Karira

Reputation: 679

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

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.

Upvotes: 11

Views: 22018

Answers (3)

S&#233;bastien M.
S&#233;bastien M.

Reputation: 172

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

Upvotes: 1

Bailey Trefts
Bailey Trefts

Reputation: 11

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

Upvotes: 1

RPM_1978
RPM_1978

Reputation: 159

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

Upvotes: 15

Related Questions