在Vue.js中处理Enter键

Question 1

我正在学习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';
    }
});

在我的示例中，如果没有提交表单，我似乎无法按下“ Enter”键。但是，我希望该validateEmailAddress功能至少先触发才能捕获它。但是，这似乎没有发生。我究竟做错了什么？

Question 2

事件修饰符

您可以在vuejs中引用事件修饰符，以防止在enter键上提交表单。

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

尽管我们可以轻松地在方法内部完成此操作，但最好是这些方法可以纯粹与数据逻辑有关，而不是必须处理DOM事件详细信息。

为了解决此问题，Vue为提供了事件修饰符v-on。回想一下修饰符是用点表示的指令后缀。

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

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

这是一个工作的小提琴。

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/vue@2.2.4/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>

展开摘要

Question 3

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

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

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

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>

展开摘要

祝好运

Question 4

您会在最后一行之前忘记一个'}'（以关闭“方法{...”）。

此代码有效：

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>

展开摘要

Question 5

此事件对我有用：

@keyup.enter.native="onEnter".

Question 6

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

@keyup.enter 要么
@keyup.13

13是回车的键码。对于@键事件，键代码为50。因此您可以使用@keyup.50。

例如：

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