vue.js监听键盘功能键输入触发事件
Vue监听键盘,直接用@绑定就可以,而且Vue为几个常用的按键提供了别名,不用去查询按键的keyCode
全部的按键别名
.enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right
一、input标签绑定esc键
<template></template> 中绑定事件
<input type="text" @keyup.esc="KeyUpEsc">
功能效果图
二、使用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键") },
三、上面两种实现效果是当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键"); }, }
效果图如图所示
免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » vue.js监听键盘功能键输入触发事件
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » vue.js监听键盘功能键输入触发事件
常见问题FAQ
- 没有金币/金币不足 怎么办?
- 本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
- 所有资源普通会员都能下载吗?
- 本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。