Javascript 在 Vue.js 中处理 Enter 键

Handling Enter Key in Vue.js

提问by user687554

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:

我正在学习 Vue.js。在我的 Vue 中，我有一个文本字段和一个按钮。默认情况下，当有人按下键盘上的 Enter 键时，此按钮会提交表单。当有人在文本字段中输入时，我想捕获按下的每个键。如果键是“@”符号，我想做一些特别的事情。如果按下的键是“Enter”键，我也想做一些特别的事情。后者是给我挑战的那个。目前，我有这个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';
    }
});

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

在我的示例中，如果不提交表单，我似乎无法按“Enter”键。然而，我希望该validateEmailAddress函数至少首先触发，以便我可以捕获它。但是，这似乎并没有发生。我究竟做错了什么？

采纳答案by Amresh Venugopal

Event Modifiers

事件修饰符

You can refer to event modifiersin vuejs to prevent form submission on enterkey.

您可以参考vuejs 中的事件修饰符来防止在enterkey 上提交表单。

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.

调用event.preventDefault()或event.stopPropagation()事件处理程序内部是非常常见的需求。

虽然我们可以在方法内部轻松做到这一点，但如果方法可以纯粹是关于数据逻辑而不是必须处理 DOM 事件细节会更好。

为了解决这个问题，Vue 为v-on. 回想一下，修饰符是由点表示的指令后缀。

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

正如文档所述，这是语法糖e.preventDefault()，将在按下 Enter 键时停止不需要的表单提交。

Hereis 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>

回答by fitorec

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

在 vue 2 中，您可以通过v-on:keyup.enter查看文档来捕获输入事件：

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

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

I leave a very simpleexample:

我留下一个非常简单的例子：

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

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

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

Good luck

祝你好运

回答by Happyriwan

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>

回答by Nuno Ribeiro

This event works to me:

这个事件对我有用：

@keyup.enter.native="onEnter".

回答by Rahul TP

For enter event handling you can use

对于输入事件处理，您可以使用

1. @keyup.enteror
2. @keyup.13

1. @keyup.enter或者
2. @keyup.13

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

13是回车的键码。对于@key 事件，keycode 是 50。所以你可以使用@keyup.50.

For example:

例如：

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