Handling Enter Key in Vue.js

Question

I have a text field and a button.
By default, this button submits a form when someone presses the Enter key on their keyboard.
When someone is typing in the text field, I want to capture each key pressed. If the key is an @ symbol, I want to do something special.

If the key pressed is the Enter key, I want to do something special as well. The latter is the one giving me challenges. Currently, I have this Fiddle, which includes this code:

new Vue({
  el: '#myApp',
  data: {
    emailAddress: '',
    log: ''
  },
  methods: {
    validateEmailAddress: function(e) {
      if (e.keyCode === 13) {
        alert('Enter was pressed');
      } else if (e.keyCode === 50) {
        alert('@ was pressed');
      }      
      this.log += e.key;
    },
    
    postEmailAddress: function() {
      this.log += '\n\nPosting';
    }
});

In my example, I can't seem to press the Enter key without it submitting the form. Yet, I would expect the validateEmailAddress function to at least fire first so that I could capture it. But, that does not seem to be happening.
What am I doing wrong?

I see no form in your fiddle?

Amresh Venugopal
– Amresh Venugopal

2017-03-22 13:07:40 +00:00
Commented Mar 22, 2017 at 13:07 — Amresh Venugopal
– Amresh Venugopal, Commented Mar 22, 2017 at 13:07

starball · Accepted Answer · 2022-12-26 23:31:08Z

275

In vue 2, You can catch enter event with v-on:keyup.enter check the documentation:

https://v2.vuejs.org/v2/guide/events.html#Key-Modifiers

I leave a very simple example:

var vm = new Vue({
  el: '#app',
  data: {msg: ''},
  methods: {
    onEnter: function() {
       this.msg = 'on enter event';
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<div id="app">
  <input v-on:keyup.enter="onEnter" />
  <h1>{{ msg }}</h1>
</div>

edited Dec 26, 2022 at 23:31

starball♦

59.5k52 gold badges312 silver badges1k bronze badges

answered May 28, 2018 at 4:38

fitorec

4,8332 gold badges29 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Turbo Over a year ago

This gave me the hint I needed. With Buefy I needed to add native for b-input: v-on:keyup.native.enter="onEnter"

Dazzle Over a year ago

You can also use @keyup.enter="doSomething"

Pushplata Over a year ago

v-on:keyup.native.enter="onEnter" is only valid with components not on button.

Nicke Manarin Over a year ago

Do we always need an input to detect key presses? I'm trying to control a Buefy carousel with the arrows and esc key (when in fullscreen).

Russell Munro Over a year ago

buefy input and chrome I needed @keydown.enter.native="doSomething" github.com/bootstrap-vue/bootstrap-vue/issues/…

kissu · Accepted Answer · 2022-12-04 02:08:16Z

Event Modifiers

You can refer to event modifiers in vuejs to prevent form submission on enter key.

It is a very common need to call event.preventDefault() or event.stopPropagation() inside event handlers.

Although we can do this easily inside methods, it would be better if the methods can be purely about data logic rather than having to deal with DOM event details.

To address this problem, Vue provides event modifiers for v-on. Recall that modifiers are directive postfixes denoted by a dot.

<form v-on:submit.prevent="<method>">
  ...
</form>

As the documentation states, this is syntactical sugar for e.preventDefault() and will stop the unwanted form submission on press of enter key.

Here is a working fiddle.

new Vue({
  el: '#myApp',
  data: {
    emailAddress: '',
    log: ''
  },
  methods: {
    validateEmailAddress: function(e) {
      if (e.keyCode === 13) {
        alert('Enter was pressed');
      } else if (e.keyCode === 50) {
        alert('@ was pressed');
      }      
      this.log += e.key;
    },
    
    postEmailAddress: function() {
            this.log += '\n\nPosting';
    },
    noop () {
      // do nothing ?
    }
  }
})

html, body, #editor {
  margin: 0;
  height: 100%;
  color: #333;
}

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="myApp" style="padding:2rem; background-color:#fff;">
<form v-on:submit.prevent="noop">
  <input type="text" v-model="emailAddress" v-on:keyup="validateEmailAddress" />
  <button type="button" v-on:click="postEmailAddress" >Subscribe</button> 
  <br /><br />
  
  <textarea v-model="log" rows="4"></textarea>  
</form>
</div>

I had to modify this to `@keyup.native="validateEmailAddress" for it to work with my setup in vue-cli 3

kissu · Accepted Answer · 2022-12-04 02:08:38Z

47

For enter event handling you can use

@keyup.enter or
@keyup.13

13 is the keycode of enter. For @ key event, the keycode is 50. So you can use @keyup.50.

For example:

<input @keyup.50="atPress()" />

edited Dec 4, 2022 at 2:08

kissu

47.3k16 gold badges94 silver badges196 bronze badges

answered Apr 6, 2020 at 10:56

Rahul TP

6046 silver badges9 bronze badges

3 Comments

BusyProgrammer Over a year ago

Is there a site that lists the mapping between characters and numbers (like 50 and @)? I couldn't find it in the Vue documentation.

Mohammad Hossein Over a year ago

can i use multiple keys? something like @keydown.1.2 ?

ThisIsMyName Over a year ago

Yes, <input @keyup.50="atPress" @keyup.13="atPress" />

Nuno Ribeiro · Accepted Answer · 2019-04-24 08:24:06Z

42

This event works to me:

@keyup.enter.native="onEnter".

edited Apr 24, 2019 at 8:24

answered Jan 4, 2019 at 15:27

Nuno Ribeiro

2,5832 gold badges28 silver badges31 bronze badges

Comments

Happyriri · Accepted Answer · 2017-03-22 13:13:47Z

25

You forget a '}' before the last line (to close the "methods {...").

This code works :

Vue.config.keyCodes.atsign = 50;

new Vue({
  el: '#myApp',
  data: {
    emailAddress: '',
    log: ''
  },
  methods: {
  
    onEnterClick: function() {
    	alert('Enter was pressed');
    },
    
    onAtSignClick: function() {
    	alert('@ was pressed');
    },
    
    postEmailAddress: function() {
			this.log += '\n\nPosting';
    }
  }
})

html, body, #editor {
  margin: 0;
  height: 100%;
  color: #333;
}

<script src="https://vuejs.org/js/vue.min.js"></script>

<div id="myApp" style="padding:2rem; background-color:#fff;">

  <input type="text" v-model="emailAddress" v-on:keyup.enter="onEnterClick" v-on:keyup.atsign="onAtSignClick" />
  
  <button type="button" v-on:click="postEmailAddress" >Subscribe</button> 
  <br /><br />
  
  <textarea v-model="log" rows="4"></textarea>
</div>

answered Mar 22, 2017 at 13:13

Happyriri

4,4532 gold badges20 silver badges30 bronze badges

1 Comment

BusyProgrammer Over a year ago

Is there a site that lists the mapping between characters and numbers (like 50 and @)? I couldn't find it in the Vue documentation

agm1984 · Accepted Answer · 2021-02-20 00:09:08Z

17

You can also pass events down into child components with something like this:

<CustomComponent
    @keyup.enter="handleKeyUp"
/>

...

<template>
    <div>
        <input
            type="text"
            v-on="$listeners"
        >
    </div>
</template>

<script>
export default {
    name: 'CustomComponent',

    mounted() {
        console.log('listeners', this.$listeners)
    },
}
</script>

That works well if you have a pass-through component and want the listeners to go onto a specific element.

answered Feb 20, 2021 at 0:09

agm1984

17.3k6 gold badges107 silver badges119 bronze badges

Comments

KitKit · Accepted Answer · 2023-06-08 03:45:39Z

10

Vue 3

In Vue 3, this code works if you want to listen event enter in input:

<input @keyup.enter="onPressEnter" />

Or maybe you want your event to fire when the key is pressed, rather than when it’s released:

<input @keydown.enter="onPressEnter" />

answered Jun 8, 2023 at 3:45

KitKit

9,66315 gold badges65 silver badges90 bronze badges

Comments

melvin · Accepted Answer · 2021-06-18 10:46:39Z

1

you are missing a closing curly bracket for methods

new Vue({
  el: '#myApp',
  data: {
    emailAddress: '',
    log: ''
  },
  methods: {
    validateEmailAddress: function(e) {
      if (e.keyCode === 13) {
        alert('Enter was pressed');
      } else if (e.keyCode === 50) {
        alert('@ was pressed');
      }      
      this.log += e.key;
    },

    postEmailAddress: function() {
      this.log += '\n\nPosting';
    }
  }//add this closing bracket and everything is fine
});

answered Jun 18, 2021 at 10:46

melvin

111 bronze badge

Comments

kissu · Accepted Answer · 2022-12-04 02:12:12Z

1

This is how you would write it in Vue3 with Composition API.

<script setup>
function callOnEnter() {
  console.log("Enter key pressed");
}
</script>

<template>
  <input type="text" @keyup.enter="callOnEnter" />
</template>

More details are available here: https://vuejs.org/guide/essentials/event-handling.html#key-modifiers

answered Dec 4, 2022 at 2:12

kissu

47.3k16 gold badges94 silver badges196 bronze badges

Collectives™ on Stack Overflow

Handling Enter Key in Vue.js

9 Answers 9

5 Comments

Event Modifiers

1 Comment

3 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

5 Comments

Event Modifiers

1 Comment

3 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related