学习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 键,从而触发点击事件。

相关推荐
Gracemark11 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
天下无贼13 小时前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
洋葱头_14 小时前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing14 小时前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化
最后一个农民工16 小时前
vue3实现仿豆包模版式智能输入框
前端·vue.js
艾小码20 小时前
Vue组件到底怎么定义?全局注册和局部注册,我踩过的坑你别再踩了!
前端·javascript·vue.js
wusp199420 小时前
项目实战——“微商城”前后台【005】之前台项目首页编写
vue.js·vant·底部导航栏
2303_Alpha20 小时前
SpringBoot
笔记·学习
萘柰奈20 小时前
Unity学习----【进阶】TextMeshPro学习(三)--进阶知识点(TMP基础设置,材质球相关,两个辅助工具类)
学习·unity
沐矢羽21 小时前
Tomcat PUT方法任意写文件漏洞学习
学习·tomcat