vue.js 键盘enter事件的使用
在监听键盘事件时,我们经常需要检查常见的键值。Vue 允许为 v-on
在监听键盘事件时添加按键修饰符:
<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` --> |
记住所有的 keyCode
比较困难,所以 Vue 为最常用的按键提供了别名:
<!-- 同上 --> |
在使用过程中,如果页面只针对一个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事件的使用的更多相关文章
- 键盘enter事件时间页面绑定
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Vue.js源码——事件机制
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:https://github.com/an ...
- js绑定键盘enter事件
js写法: document.onkeydown = function(event){ var event=document.all?window.event:event; if((event.key ...
- JS和JQuery实现Button绑定键盘Enter事件实现提交
JavaScript实现方法 document.onkeydown = function(e) { if (!e) e = window.event;//火狐中是 window.event if (( ...
- vue.js的一些事件绑定和表单数据双向绑定
知识点: v-on:相当于: 例如:v-on:click==@click ,menthods事件绑定 v-on修饰符可以指定键盘事件 v-model进行表单数据的双向绑定 <template&g ...
- 刚学的vue.js的单一事件管理组件通信
第一次在博客园写的技术分享,写的不好的话各位大神多体谅,好啦进入主题 说说思路 首先 第一步,准备一个空的示例对象 var Event=new Vue(); 第二步,准备发送的数据 Event.$em ...
- JS使用Enter事件将输入的字符倒叙输出
在JavaScript中执行当用户按下Enter键位时将用户输入的字符倒叙输出! HTML代码: <body> <form id="form1" runat=&q ...
- js键盘操作事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js 添加enter事件
$(function () { document.onkeydown = function (e) { var ev = document.all ? window.event : e; ) { if ...
随机推荐
- xampp/apache启动失败解决方法
我的问题是: 9:15:53 AM [Apache] Error: Apache shutdown unexpectedly.9:15:53 AM [Apache] This may be due ...
- LeetCode算法题(长期更新)
1.给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数组中同样 ...
- 使用 mybatis-generator 自动生成 MyBatis 代码
首先把这三个文件放到一个目录里,我是放到了C盘下的wangbo目录下: 接下来就是设置config.xml文件了,config.xml: <?xml version="1.0" ...
- input可以自动换行吗???
某天,在项目开发的时候,后台java问我input可以换行吗,当时我也是有点懵逼,思考了几秒钟说应该可以,然后就开始尝试各种方法.然后,然后就打脸了.... 最后发现,原来input没有自动换行功能, ...
- Apache重写规则
1..htaccess文件使用前提 .htaccess的主要作用就是实现url改写,也就是当浏览器通过url访问到服务器某个文件夹时,作为主人,我们可以来接待这个url,具体 地怎样接待它,就是此文件 ...
- shell 脚本中的当前工作目录等于执行脚本时所在的工作目录
1. 测试脚本 在当前目录下创建 h1 h2两个文件夹 2. 在脚本所在目录执行脚本 在当前目录下创建了h1 h2两个目录 3. 在其他目录爱=下执行脚本 在其他目录下执行脚本时,在执行脚本所在的目录 ...
- HttpClient 传输文件的两种方式
1. org.apache.commons.httpclient.HttpClient 1.1 pom <dependency> <groupId>org.apache.htt ...
- 使用Masonry对UIScrollView自动布局
之前使用Masonry对UIScrollView进行过约束,当时是遇到了问题的,怎么约束都不对,因为赶进度直接改用frame了也没有对问题深究.就这样过了很久.........,直到前一段换工作的时候 ...
- 关于vue中钩子函数非常好的博客
http://www.cnblogs.com/caimuqing/p/6728568.html
- Web渗透:PHP字符编码绕过漏洞总结
其实这东西国内少数黑客早已知道,只不过没有共享公布而已.有些人是不愿共享,宁愿烂在地里,另外的一些则是用来牟利. 该漏洞最早2006年被国外用来讨论数据库字符集设为GBK时,0xbf27本身不是一个有 ...