vue.js监听键盘事件-木庄网络博客

2022-02-15 06:22:46 PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者angryTom，侵删。

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

全部的按键别名

.enter

.tab

.delete (捕获“删除”和“退格”键)

.esc

.space

.up

.down

.left

.right

一、input标签绑定esc键

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

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

KeyUpEsc:function(){
      alert("监听到esc键")
  }

功能效果图

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

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

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

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

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

相关阅读 >>

更多相关阅读请进入《vue》频道 >>

书籍

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者