Handling Enter Key in Vue js

Question

I m learning Vue js  In my Vue  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

User · Answer

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.

User · Answer

In vue 2  You can catch enter event with v-on keyup enter check the documentation      https   vuejs org v2 guide events html Key-Modifiers   I leave a very simple example    x000D   x000D  var vm   new Vue   x000D    el    app   x000D    data   msg       x000D    methods    x000D      onEnter  function     x000D         this msg    on enter event   x000D        x000D      x000D      x000D   lt script src  https   cdn jsdelivr net npm vue  gt  lt  script gt  x000D   x000D   lt div id  app  gt  x000D     lt input v-on keyup enter  onEnter    gt  x000D     lt h1 gt    msg    lt  h1 gt  x000D   lt  div gt  x000D   x000D   x000D    Good luck

User · Answer

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     lt form v-on submit prevent   lt method gt   gt         lt  form gt    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    x000D   x000D  new Vue   x000D    el    myApp   x000D    data    x000D      emailAddress      x000D      log     x000D       x000D    methods    x000D      validateEmailAddress  function e    x000D        if  e keyCode     13    x000D          alert  Enter was pressed    x000D          else if  e keyCode     50    x000D          alert    was pressed    x000D                x000D        this log    e key  x000D         x000D       x000D      postEmailAddress  function     x000D     this log      n nPosting   x000D         x000D      noop      x000D           do nothing   x000D        x000D      x000D     x000D  html  body   editor   x000D    margin  0  x000D    height  100   x000D    color   333  x000D    x000D   lt script src  https   unpkg com vue 2 2 4 dist vue js  gt  lt  script gt  x000D   lt div id  myApp  style  padding 2rem  background-color  fff   gt  x000D   lt form v-on submit prevent  noop  gt  x000D     lt input type  text  v-model  emailAddress  v-on keyup  validateEmailAddress    gt  x000D     lt button type  button  v-on click  postEmailAddress   gt Subscribe lt  button gt   x000D     lt br   gt  lt br   gt  x000D     x000D     lt textarea v-model  log  rows  4  gt  lt  textarea gt    x000D   lt  form gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

This event works to me    keyup enter native  onEnter

User · Answer

You forget a     before the last line  to close the  methods          This code works     x000D   x000D  Vue config keyCodes atsign   50  x000D   x000D  new Vue   x000D    el    myApp   x000D    data    x000D      emailAddress      x000D      log     x000D       x000D    methods    x000D     x000D      onEnterClick  function     x000D       alert  Enter was pressed    x000D         x000D       x000D      onAtSignClick  function     x000D       alert    was pressed    x000D         x000D       x000D      postEmailAddress  function     x000D     this log      n nPosting   x000D        x000D      x000D     x000D  html  body   editor   x000D    margin  0  x000D    height  100   x000D    color   333  x000D    x000D   lt script src  https   vuejs org js vue min js  gt  lt  script gt  x000D   x000D   lt div id  myApp  style  padding 2rem  background-color  fff   gt  x000D   x000D     lt input type  text  v-model  emailAddress  v-on keyup enter  onEnterClick  v-on keyup atsign  onAtSignClick    gt  x000D     x000D     lt button type  button  v-on click  postEmailAddress   gt Subscribe lt  button gt   x000D     lt br   gt  lt br   gt  x000D     x000D     lt textarea v-model  log  rows  4  gt  lt  textarea gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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    lt input  keyup 50  atPress      gt

[javascript] Handling Enter Key in Vue.js

Examples related to javascript

Examples related to vue.js