对vue 键盘回车事件的实例讲解


Posted in Javascript onAugust 25, 2018

如果是原生的input,使用 @keyup.enter就可以,若是使用了element-ui,则要加上native限制符,因为element-ui把input进行了封装,原事件就不起作用了,代码如下:

<input v-model="form.name" placeholder="昵称" @keyup.enter="submit">
<el-input v-model="form.name" placeholder="昵称" @keyup.enter.native="submit"></el-input>

现在发现这个键盘事件好像对input框支持比较好,其他的元素多少会有点问题,或者直接无效,究其原因是其他的元素没有获取焦点或者没有键盘事件。

我现在的解决方式,

如果是没有键盘事件使用css把input框绝对定位到需要绑定键盘事件的元素之上并且把input框设置为透明,把该input框与原来要绑定键盘事件的元素进行绑定,达到效果;

test.vue

<div class="container">
 <input class="item opa" @keyup="deleteDiv">
 <div class="item">div内容</div>
 <span click="DeleteDiv">X</span>
</div>

css:

div.container{
 position:relative;
}
.item{
 position:absolute;
 top:0;
 left:0;
 width:100px;
 height:100px;
 border:1px solid #ccc;
}
.opa{
 opacity:0;
 z-index:5;
}
span{
 position:absolute;
 top:5px;
 right:5px;
 z-index:10;
}

js:

methods:{
 deleteDiv(){
 alert("delete");
 }
}

如果是没有获取焦点,则可以写一个自定义指令自动获取焦点,

自动获取焦点自定义指令见我另一篇文章 点击进入

拓展知识:vuejs 2.0 键盘事件详解

如下所示:

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <meta charset="utf-8">
 <script src="vue.js"></script>

 <script type="text/javascript">
 window.onload = function(){
  var vm = new Vue({
  el:'#box',
  methods:{
   show:function(ev){
   if(ev.keyCode == 13){
    alert('你按回车键了');
   }
   },
  }
  });
 }
 </script>
</head>
<body>
 <div id="box">
 <input type="text" placeholder="请输入" @keyup="show($event)"> 

 <input type="text" placeholder="请输入" @keyup.13="show($event)">
 </div>
</body>
</html>

当按下键盘的时候,执行show方法,然后再去执行相应的业务。

两个input的效果都是一样的 如果安13 也就是按键 enter 才会执行弹窗!!

@keyup.13 回车

@keyup.enter 回车

@keyup.left 左键

@keyup.right 右键

@keyup.up 上键

@keyup.down 下键

@keyup.delete 删除键

以上这篇对vue 键盘回车事件的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
Javascript函数的参数
Jul 16 Javascript
JS实现Fisheye效果动感放大菜单代码
Oct 21 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 Javascript
JavaScript动态数量的文件上传控件
Nov 18 Javascript
Node.js中多进程模块Cluster的介绍与使用
May 27 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
微信小程序实现两个页面传值的方法分析
Dec 11 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
基于js实现数组相邻元素上移下移
May 19 Javascript
Canvas三种动态画圆实现方法说明(小结)
Apr 16 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
Aug 25 #Javascript
vue 自定义指令自动获取文本框焦点的方法
Aug 25 #Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 #Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 #Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 #Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 #Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 #Javascript
You might like
使用php判断网页是否gzip压缩
2013/06/25 PHP
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
php中preg_replace正则替换用法分析【一次替换多个值】
2017/01/17 PHP
学习ExtJS Column布局
2009/10/08 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
使用GruntJS构建Web程序之合并压缩篇
2014/06/06 Javascript
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
深入分析javascript中console命令
2016/08/14 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
node.js利用redis数据库缓存数据的方法
2017/03/01 Javascript
vue组件生命周期详解
2017/11/07 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
Vue-Access-Control 前端用户权限控制解决方案
2017/12/01 Javascript
微信小程序日历效果
2018/12/29 Javascript
Angular Excel 导入与导出的实现代码
2019/04/17 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
Vue如何提升首屏加载速度实例解析
2020/06/25 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
vue 计算属性和侦听器的使用小结
2021/01/25 Vue.js
提升Python程序运行效率的6个方法
2015/03/31 Python
Python批量按比例缩小图片脚本分享
2015/05/21 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
python3实现猜数字游戏
2020/12/07 Python
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
Nike墨西哥官网:Nike MX
2020/08/30 全球购物
介绍一下write命令
2012/09/24 面试题
行政经理岗位职责
2013/11/09 职场文书
会计系个人求职信范文分享
2013/12/20 职场文书
安全检查与奖惩制度
2014/01/23 职场文书
经典毕业生求职信
2014/07/12 职场文书
教学督导岗位职责
2015/04/10 职场文书
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python