处理 Vue.js 中的 Enter 键

发布于03月22日

我在学Vue.js.在我的Vue中，我有一个文本字段和一个按钮.默认情况下，当有人按键盘上的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';
    }
});

在我的例子中，如果不提交表单，我似乎无法按下"回车"键.然而，我希望validateEmailAddress函数至少先启动，这样我就可以捕获它.但是，这似乎没有发生.我做错了什么？

事件修饰符

您可以在vuejs中参考event modifiers，以防止在enter键上提交表单.

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

虽然我们可以在方法内部轻松实现这一点，但如果这些方法可以纯粹关于数据逻辑，而不是必须处理DOM事件细节，那就更好了.

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

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

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

Here是一把有效的小提琴.

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>

处理 Vue.js 中的 Enter 键

推荐答案

事件修饰符

Vue.js相关问答推荐

将事件监听器绑定到动态元素

如何用其他组件编译Vue模板？

Vuetify 2中自定义标头的排序和筛选

Vue ChildComponent (GrandchildComponent) 应该更新 ParentComponent 的列表

Vue 3 范围滑块中的多个值

在 onMounted 之前渲染的 Vue 模板

Vue 3 如何通过多个组件传递插槽

JSDoc 单文件 Vue 组件

带有参数的 Vuex 映射 Getter - 缓存？

在重复内容区域中添加

Object.assign 没有正确复制

Webpack 你可能需要一个合适的加载器来处理这个文件类型

如何使用 vue-resource 添加额外的标头来发布请求？

动态注册本地 Vue.js 组件

Leaflet+Vue+Vuetify / Leaflet map 隐藏 vuetify 弹出对话框

Vue JS 在渲染前等待数据

IOS在输入焦点上显示键盘

路由使用 nuxt-i18n 在 nuxt 中推送区域设置路由

如何在 Vue.js 2 应用程序中模拟 onbeforeunload？

返回 VueJS 方法的Native Code消息