在监听键盘事件时,我们经常需要检查常见的键值。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. xampp/apache启动失败解决方法

    我的问题是: 9:15:53 AM  [Apache] Error: Apache shutdown unexpectedly.9:15:53 AM  [Apache] This may be due ...

  2. LeetCode算法题(长期更新)

    1.给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数组中同样 ...

  3. 使用 mybatis-generator 自动生成 MyBatis 代码

    首先把这三个文件放到一个目录里,我是放到了C盘下的wangbo目录下: 接下来就是设置config.xml文件了,config.xml: <?xml version="1.0" ...

  4. input可以自动换行吗???

    某天,在项目开发的时候,后台java问我input可以换行吗,当时我也是有点懵逼,思考了几秒钟说应该可以,然后就开始尝试各种方法.然后,然后就打脸了.... 最后发现,原来input没有自动换行功能, ...

  5. Apache重写规则

    1..htaccess文件使用前提 .htaccess的主要作用就是实现url改写,也就是当浏览器通过url访问到服务器某个文件夹时,作为主人,我们可以来接待这个url,具体 地怎样接待它,就是此文件 ...

  6. shell 脚本中的当前工作目录等于执行脚本时所在的工作目录

    1. 测试脚本 在当前目录下创建 h1 h2两个文件夹 2. 在脚本所在目录执行脚本 在当前目录下创建了h1 h2两个目录 3. 在其他目录爱=下执行脚本 在其他目录下执行脚本时,在执行脚本所在的目录 ...

  7. HttpClient 传输文件的两种方式

    1. org.apache.commons.httpclient.HttpClient 1.1 pom <dependency> <groupId>org.apache.htt ...

  8. 使用Masonry对UIScrollView自动布局

    之前使用Masonry对UIScrollView进行过约束,当时是遇到了问题的,怎么约束都不对,因为赶进度直接改用frame了也没有对问题深究.就这样过了很久.........,直到前一段换工作的时候 ...

  9. 关于vue中钩子函数非常好的博客

    http://www.cnblogs.com/caimuqing/p/6728568.html

  10. Web渗透:PHP字符编码绕过漏洞总结

    其实这东西国内少数黑客早已知道,只不过没有共享公布而已.有些人是不愿共享,宁愿烂在地里,另外的一些则是用来牟利. 该漏洞最早2006年被国外用来讨论数据库字符集设为GBK时,0xbf27本身不是一个有 ...