脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue 键盘回车事件

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

 更新时间：2018年08月25日 09:52:05   作者：lx_1024  
今天小编就为大家分享一篇对vue 键盘回车事件的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

如果是原生的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 键盘回车事件的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue中实现methods一个方法调用另外一个方法

    vue中实现methods一个方法调用另外一个方法

    下面小编就为大家分享一篇vue中实现methods一个方法调用另外一个方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • vue-pdf实现文件在线预览

    vue-pdf实现文件在线预览

    这篇文章主要为大家详细介绍了vue-pdf实现文件在线预览，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • vue实现路由不变的情况下，刷新页面操作示例

    vue实现路由不变的情况下，刷新页面操作示例

    这篇文章主要介绍了vue实现路由不变的情况下，刷新页面操作,结合实例形式分析了vue路由不变的情况下刷新页面具体原理、操作方法与相关注意事项,需要的朋友可以参考下
    2020-02-02
  • 使用Vue开发一个实时性时间转换指令

    使用Vue开发一个实时性时间转换指令

    我们就来实现这样一个Vue自定义指令v-time，将表达式传入的时间戳实时转换为相对时间。下面小编给大家带来了使用Vue开发一个实时性时间转换指令，需要的朋友参考下吧
    2018-01-01
  • 详解Vue3 Teleport 的实践及原理

    详解Vue3 Teleport 的实践及原理

    这篇文章主要介绍了Vue3 Teleport 组件的实践及原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • vue中keep-alive组件使用和一些基础配置方法

    vue中keep-alive组件使用和一些基础配置方法

    本文主要介绍了Vue中keep-alive组件的使用方法和一些基础配置,keep-alive是Vue中的一个抽象组件,可以缓存组件实例,提高性能,本文给大家介绍vue中keep-alive组件使用和一些基础配置方法,感兴趣的朋友一起看看吧
    2024-10-10
  • Vue filter介绍及详细使用

    Vue filter介绍及详细使用

    这篇文章主要介绍了Vue filter介绍及详细使用,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2018-04-04
  • vue项目实现分页效果

    vue项目实现分页效果

    这篇文章主要为大家详细介绍了vue项目实现分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-03-03
  • Vue @click.stop阻止事件向祖先元素传递方式(事件冒泡)

    Vue @click.stop阻止事件向祖先元素传递方式(事件冒泡)

    在Vue中,使用@click.stop修饰符可以阻止事件向父级元素传递,从而实现单击父级元素执行函数,而单击子元素不执行函数的需求
    2025-02-02
  • 如何修改element-ui中tree组件的icon图标(小白都会的前端技能)

    如何修改element-ui中tree组件的icon图标(小白都会的前端技能)

    这篇文章主要给大家介绍了关于如何修改element-ui中tree组件的icon图标的相关资料,本文介绍的是小白都会的前端技能,文中通过代码以及图文介绍的非常详细,需要的朋友可以参考下
    2024-01-01

最新评论