对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 相关文章推荐
Javascript注入技巧
Jun 22 Javascript
Prototype1.6 JS 官方下载地址
Nov 30 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
Oct 24 Javascript
JavaScript中的数组特性介绍
Dec 30 Javascript
详解AngularJS 模态对话框
Apr 07 Javascript
前端JS面试中常见的算法问题总结
Dec 23 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 Javascript
详解angular中的作用域及继承
May 31 Javascript
微信小程序wx.request拦截器使用详解
Jul 09 Javascript
从零搭一个自用的前端脚手架的方法步骤
Sep 23 Javascript
js实现转动骰子模型
Oct 24 Javascript
JS原型prototype和__proto__用法实例分析
Mar 14 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学习之正则表达式
2011/04/17 PHP
采用memcache在web集群中实现session的同步会话
2014/07/05 PHP
php中time()与$_SERVER[REQUEST_TIME]用法区别
2014/11/19 PHP
php生成图片缩略图的方法
2015/04/07 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
PHP pear安装配置教程
2016/05/14 PHP
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
jQuery 1.8 Release版本发布了
2012/08/14 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
jQuery 遍历函数详解
2015/07/05 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
2016/02/25 Javascript
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
微信小程序 video组件详解
2016/10/25 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
js实现密码强度检验
2017/01/15 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
nodejs之get/post请求的几种方式小结
2017/07/26 NodeJs
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
用npm-run实现自动化任务的方法示例
2019/01/14 Javascript
小程序使用分包的示例代码
2020/03/23 Javascript
Python用Bottle轻量级框架进行Web开发
2016/06/08 Python
python matplotlib画图实例代码分享
2017/12/27 Python
Python实现Selenium自动化Page模式
2019/07/14 Python
Python使用Chrome插件实现爬虫过程图解
2020/06/09 Python
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
给老婆的搞笑检讨书
2014/01/12 职场文书
幼儿园开学寄语
2014/04/03 职场文书
网吧消防安全责任书
2014/07/29 职场文书
2014统计局民主生活会对照检查材料思想汇报
2014/10/02 职场文书
调任通知
2015/04/21 职场文书
2016年“我们的节日·中秋节”活动总结
2016/04/05 职场文书
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技