Vue11-键盘事件

一、键盘事件:keydown和keyup事件

keydown 和 keyup 是两种常用于处理键盘输入事件的JavaScript事件。当你在网页的输入框或其他可输入元素上按下或释放键盘上的某个键时,这些事件就会被触发。

1-1、keydown 事件

当用户按下键盘上的某个键时,keydown 事件会被触发。这个事件在按键被按下且字符尚未出现在屏幕上时发生。在 keydown 事件中,你可以通过 event.key 属性获取被按下的键的值(如果它是一个可打印的字符),或者通过 event.code 属性获取该键的完整键盘代码(例如 "KeyA" 表示 A 键)。

    <div id="root">
        <input type="text" placeholder="按下回车提示输入">
    </div>
    
    <script>
        document.addEventListener('keydown', function(event) {  
            console.log('Key pressed:', event.key);  
        });
    </script>

1-2、keyup事件

当用户释放键盘上的某个键时,keyup 事件会被触发。这个事件在按键被释放且字符已经出现在屏幕上时发生。与 keydown 类似,你可以通过 event.key 或 event.code 获取被释放的键的信息。

一般用keyup事件。 

1-3、示例

 

1-4、vue别名

二、Vue中常用按键的9个别名

键盘上,任何一个按键,都有自己的名字和编码!!!

获取按键的名字:event.key

获取按键的编码:event.keycode。

2-1、tab健

功能:将光标的焦点从当前元素身上切走

用tab健,必须配合keydown使用

2-2、4个系统修饰健

需求:只有按:ctrl+y才能触发函数,其余按键不行

2-3、keycode指定按键(不推荐)

不推荐,因为不同的键盘可能keycode不同。

2-4、自定义键盘别名

相关推荐

  1. vue键盘事件进行监听

    2024-06-12 02:02:03       32 阅读
  2. Vue键盘按键别名/事件说明及案例

    2024-06-12 02:02:03       58 阅读
  3. vue监听键盘回车事件的三种方法

    2024-06-12 02:02:03       35 阅读
  4. vue监听键盘回车事件的三种方法

    2024-06-12 02:02:03       37 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-06-12 02:02:03       91 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-06-12 02:02:03       97 阅读
  3. 在Django里面运行非项目文件

    2024-06-12 02:02:03       78 阅读
  4. Python语言-面向对象

    2024-06-12 02:02:03       88 阅读

热门阅读

  1. 2024年,计算机相关专业还值得选择吗?

    2024-06-12 02:02:03       35 阅读
  2. YDT .netcore学习笔记

    2024-06-12 02:02:03       23 阅读
  3. Android应用图标到应用显示过程

    2024-06-12 02:02:03       34 阅读
  4. element-plus ui的使用说明

    2024-06-12 02:02:03       36 阅读
  5. 数据分析------统计学知识点(四)

    2024-06-12 02:02:03       31 阅读
  6. C++构建MVC学生信息管理系统

    2024-06-12 02:02:03       34 阅读
  7. GIT生成SSH公钥图文教程

    2024-06-12 02:02:03       41 阅读