vue中键盘事件的触发

Beblien

已于 2022-07-13 19:18:28 修改

阅读量4.1k

点赞数

文章标签： vue.js 前端

于 2022-07-13 19:04:23 首次发布

本文链接：https://blog.csdn.net/weixin_50656154/article/details/125770182

版权

本文介绍了在Vue.js中如何处理键盘事件，包括基本的键盘事件绑定、常见键盘事件如回车、删除、方向键等，以及如何使用系统修饰键和自定义按键别名。通过实例展示了如何监听和响应键盘操作，如给输入框绑定回车事件，以及获取键盘按键的原始key值。

摘要由CSDN通过智能技术生成

1：我们已经知道，vue中事件的基本使用就是加上@click ,举个简单例子给按钮添加点击事件：

<button @click="show">点我提示信息1（不传参）</button>
<button @click="shows($event,66)">点我提示信息2（传参）</button>

2：那么如何给键盘添加一个事件呢？

还是这样，再举个例子,我们给输入框绑定一个简单的回车事件。

<input type="text" placeholder="按下回车提示输入" @keydown.enter="show">

那么keydown就是说键盘敲下时就触发，那如果想键盘敲下，然后手离开时再触发时我们就会用到keyup。

3：常见的键盘事件。

                            回车 => enter

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

                            退出 => esc

                            空格 => space

                            换行 => tab (特殊，必须配合keydown去使用)