vue.js监听键盘功能键输入触发事件

作者 : IT 大叔 本文共768个字,预计阅读时间需要2分钟 发布时间: 2020-07-30

vue.js监听键盘功能键输入触发事件插图

Vue监听键盘,直接用@绑定就可以,而且Vue为几个常用的按键提供了别名,不用去查询按键的keyCode

全部的按键别名

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

一、input标签绑定esc键

<template></template> 中绑定事件

<input type="text" @keyup.esc="KeyUpEsc">

功能效果图

vue.js监听键盘功能键输入触发事件插图(2)

二、使用element组件库的el-input标签,绑定delete键

<template></template> 中绑定事件

<el-input v-model="input" placeholder="请输入内容" @keyup.delete.native="KeyUpDelete"></el-input>

为什么这次绑定事件多一个.native修饰符,这个可能是因为element-ui封装了个div在input标签外面,把原来的事件隐藏了,所以如果不加.native的话,按键不会生效

<script></script>中定义事件

KeyUpDelete :function(){ alert("监听到delete键") },

vue.js监听键盘功能键输入触发事件插图(4)

三、上面两种实现效果是当input标签获取到焦点的时候,才能监听到键盘,下面这种是全局监听enter键,是把监听事件绑定到document上(登录页面常用)

created: function() {
       var _this = this;
       document.onkeydown = function(e) {
           let key = window.event.keyCode;
           if (key == 13) {
               _this.submit();
           }
       };
   },
methods: {
     submit: function() {
         alert("监听到enter键");
     },
}

效果图如图所示

vue.js监听键盘功能键输入触发事件插图(6)

免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » vue.js监听键盘功能键输入触发事件

常见问题FAQ

没有金币/金币不足 怎么办?
本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
所有资源普通会员都能下载吗?
本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。

发表评论