学习Vue 02-19 使用按键代码修改器检测键盘事件

19 使用按键代码修改器检测键盘事件

While event modifiers are for interfering with the event propagation flow, key modifiers help detect special keys of keyboard events such as keyup, keydown, and keypress.

事件修改器用于干扰事件传播流,而按键修改器则有助于检测键盘事件的特殊按键,如按键上移、按键下移和按键下压。

Usually, to detect a specific key, we need to perform two steps:

  • Identify the key code, key, or the code represented by that key. For instance, the keyCode for Enter is 13, its key is "Enter", and its code is "Enter."
  • When firing the event handler, within the handler, we need to check manually that event.keyCode (or event.code or event.key) matches the target key code.

通常,要检测一个特定的密钥,我们需要执行两个步骤:

  • 识别按键代码、按键或该按键所代表的代码。例如,Enter 的 keyCode 是 13,它的键是 "Enter",它的代码是 "Enter"。

  • 在启动事件处理程序时,我们需要在处理程序中手动检查 event.keyCode(或 event.code 或 event.key)是否与目标按键代码相匹配。

This approach is not efficient for maintaining reusable and clean code in a large codebase. v-on comes with built-in key modifiers as a better alternative. If we want to detect if the user types the Enter key, we add the modifier .enter to the related keydown event, following the same syntax when using event modifiers.

v-on 内置的按键修饰符是一种更好的替代方法。如果我们要检测用户是否键入了 Enter 键,我们可以在相关的按键事件中添加修饰符 .enter,并遵循使用事件修饰符时的相同语法。

Let's assume we have an input element, and we log a message to the console whenever a user presses Enter, as seen in Example 2-10.

假设我们有一个输入元素,每当用户按下 Enter 键,我们就会向控制台记录一条信息,如例 2-10 所示。

html 复制代码
<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    onEnter(e) {
      if (e.keyCode === '13') {
        console.log('User pressed Enter!')
      }
    }
  }
}
</script>
<template>
  <input @keydown="onEnter">
</template>

We now can rewrite it using @keydown.enter.

现在我们可以使用 @keydown.enter 重写它。

Example 2-11. Checking for Enter key pressed by @keydown.enter modifier.

例 2-11. 检查 @keydown.enter 修改器是否按下 Enter 键。

html 复制代码
<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    onEnter(e) {
      console.log('User pressed Enter!')
    }
  }
}
</script>
<template>
  <input @keydown.enter="onEnter">
</template>

The app behaves the same in both cases.

在这两种情况下,应用程序的行为都是一样的。

A few other commonly used key modifiers are .tab, .delete, .esc, and .space.

其他一些常用的按键修饰符包括 .tab、.delete、.esc 和 .space。

Another popular use case is to capture a special keys combination, such as Ctrl & Enter (CMD & Enter for MacOS) or Shift + S. In these scenarios, we chain the system key modifiers (.shift, .ctrl, .alt and .meta for CMD key in MacOS) with key code modifiers, as in the following example:

在这些情况下,我们将系统按键修饰符(.shift、.ctrl、.alt 和 MacOS 中 CMD 键的 .meta)与按键代码修饰符进行连锁,如下例所示:

html 复制代码
<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    onEnter(e) {
      console.log('User pressed Enter!')
    }
  }
}
</script>
<template>
  <input @keydown.ctrl.enter="onEnter">
</template>

Or chaining the shift modifier and key code modifier for S key (keyCode is 83):

或者将 shift 修改器和 S 键(keyCode 为 83)的键代码修改器连锁使用:

html 复制代码
<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    onEnter(e) {
      console.log('User pressed Enter!')
    }
  }
}
</script>
<template>
  <input @keydown.shift.s="onEnter">
</template>

Also, to capture the exact key combinations for triggering an event, we use the .exact modifier:

此外,为了捕捉触发事件的准确组合键,我们使用了 .exact 修饰符:

html 复制代码
<button @click.shift.exact="onShiftEnter" />

Combining .shift and .exact makes sure the click event fires when the user presses only the Shift key while clicking the button.

将 .shift 和 .exact 结合使用,可确保用户在点击按钮时只按下 Shift 键,从而触发点击事件。

相关推荐
Luis Li 的猫猫2 小时前
深度学习中的知识蒸馏
人工智能·经验分享·深度学习·学习·算法
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
鹿鸣悠悠4 小时前
第二月:学习 NumPy、Pandas 和 Matplotlib 是数据分析和科学计算的基础
学习·numpy·pandas
Java能学吗5 小时前
2.17学习总结
数据结构·学习
靡不有初1116 小时前
CCF-CSP第31次认证第二题——坐标变换(其二)【NA!前缀和思想的细节,输出为0的常见原因】
c++·学习·ccfcsp
nihui1237 小时前
Uniapp 实现顶部标签页切换功能?
javascript·vue.js·uni-app
shengmeshi8 小时前
vue3项目img标签动态设置src,提示:ReferenceError: require is not defined
javascript·vue.js·ecmascript
BillKu8 小时前
vue3中<el-table-column>状态的显示
javascript·vue.js·elementui
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
虾球xz9 小时前
游戏引擎学习第108天
学习·游戏引擎