在监听键盘事件时,我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名:

<!-- 同上 -->
<input v-on:keyup.enter="submit"> <!-- 缩写语法 -->
<input @keyup.enter="submit">

在使用过程中,如果页面只针对一个Input添加键盘enter事件,可以直接按照官方文档定义的别名增加相应事件就可以了

但是如果是要对页面的button添加enter键盘事件,就不能写在input或者button上,因为获取不到焦点,这时候可以直接写在created里,如下:


<template>
<div class="form-inline col-sm-12">

// 错误写法:这么写没有生效
<input class="form-control search-input" type="search" placeholder="输入用户名进行搜索" aria-label="Search" maxlength="32" v-model.trim="search_value" @keyup.enter="enterSearchMember">

<button class="btn btn-primary btn-sch" type="button" @click="goSearch">搜索</button>
</div>
</template>
<script>
export default {
name: 'searchMember',
data() {
return {
search_value: ''
}
},

//不能直接将事件添加写在input上,因为这样必须焦点在input上才能触发,所以可以直接绑定在document上即可
created() {
var lett = this;
document.onkeydown = function(e) {
var key = window.event.keyCode;
if (key == 13) {
lett.enterSearchMember();
}
}
},
methods: {
goSearch: function() {
let search_nick = this.search_value;
if (search_nick !== 0) {
this.$emit('searchMember', search_nick)
}
},
enterSearchMember() {
this.goSearch()
}
}
}
</script>


补充一个问题:

当我们对input添加enter键盘事件后,点击enter页面会刷新,可能是因为你把input写在了form里,form会自动提交一次,页面就是一个刷新的效果,这样体验并不好

解决办法:

1、去掉form

2、如果非得用表单,只要不让表单里有且只有一个文本框就OK了

3、在表单 form 后面加上一个 onsubmit 事件,返回 false,来阻止 form 提交


vue全部的按键别名:

  • .enter
  • .tab
  • .delete (捕获“删除”和“退格”键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

vue.js 键盘enter事件的使用的更多相关文章

  1. 键盘enter事件时间页面绑定

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. Vue.js源码——事件机制

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:https://github.com/an ...

  3. js绑定键盘enter事件

    js写法: document.onkeydown = function(event){ var event=document.all?window.event:event; if((event.key ...

  4. JS和JQuery实现Button绑定键盘Enter事件实现提交

    JavaScript实现方法 document.onkeydown = function(e) { if (!e) e = window.event;//火狐中是 window.event if (( ...

  5. vue.js的一些事件绑定和表单数据双向绑定

    知识点: v-on:相当于: 例如:v-on:click==@click ,menthods事件绑定 v-on修饰符可以指定键盘事件 v-model进行表单数据的双向绑定 <template&g ...

  6. 刚学的vue.js的单一事件管理组件通信

    第一次在博客园写的技术分享,写的不好的话各位大神多体谅,好啦进入主题 说说思路 首先 第一步,准备一个空的示例对象 var Event=new Vue(); 第二步,准备发送的数据 Event.$em ...

  7. JS使用Enter事件将输入的字符倒叙输出

    在JavaScript中执行当用户按下Enter键位时将用户输入的字符倒叙输出! HTML代码: <body> <form id="form1" runat=&q ...

  8. js键盘操作事件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. js 添加enter事件

    $(function () { document.onkeydown = function (e) { var ev = document.all ? window.event : e; ) { if ...

随机推荐

  1. ajax如何返回多个值

    应用场景:  在前端有个ajax请求到后端后,需要返回多个变量的值,在这里使用的是Json格式作为值传递,使用eval函数来解析Json格式. 要传递的值data: var data = " ...

  2. [笔记]JavaScript获得对象属性个数的方法

    //扩展对象的count方法 Object.prototype.count = ( Object.prototype.hasOwnProperty(‘__count__’) ) ? function ...

  3. 杭电ACM2011-- 多项式求和

    题目地址 :多项式求和 /* #include<stdio.h> int main() { int n,b; double a[110],x; double z; int i,j; int ...

  4. HTTP学习笔记3-响应结构

    HTTP响应: 13,在接收和解释请求消息后,服务器会返回一个HTTP响应消息. 14,与HTTP请求类似,HTTP响应也是由三个部分组成,分别是:状态行.消息报头.响应正文. 15,状态行由协议版本 ...

  5. OpenCascade Ruled Surface

    OpenCascade Ruled Surface eryar@163.com Abstract. A ruled surface is formed by moving a line connect ...

  6. 初探Java设计模式1:创建型模式(工厂,单例等)

    Java 设计模式 一直想写一篇介绍设计模式的文章,让读者可以很快看完,而且一看就懂,看懂就会用,同时不会将各个模式搞混.自认为本文还是写得不错的,花了不少心思来写这文章和做图,力求让读者真的能看着简 ...

  7. Java多线程核心技术(四)Lock的使用

    本文主要介绍使用Java5中Lock对象也能实现同步的效果,而且在使用上更加方便. 本文着重掌握如下2个知识点: ReentrantLock 类的使用. ReentrantReadWriteLock ...

  8. [转]C# NPOI 导入与导出Excel文档 兼容xlsx, xls

    本文转自:https://www.cnblogs.com/lazyneal/p/6148912.html 参考:http://www.cnblogs.com/restran/p/3889479.htm ...

  9. 查看Ubuntu的版本和系统版本

    命令行语句:lsb_release -a 命令行语句:uname -a

  10. springboot email 中常量值 配置 mailUtils

    列如:邮件配置: application-test.properties #################Email config start############################ ...