Vue：（六）键盘事件

最新推荐文章于 2024-05-15 07:38:40 发布

置顶空谷有来人

最新推荐文章于 2024-05-15 07:38:40 发布

阅读量444

点赞数

分类专栏： Vue 前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_41377877/article/details/127938329

版权

前端同时被 2 个专栏收录

48 篇文章 0 订阅

订阅专栏

Vue

38 篇文章 2 订阅

订阅专栏

键盘事件

Vue中常用的按键别名

1. 回车：enter
2. 删除：delete（捕获删除和退格键）
3. 退出：esc
4. 空格：space
5. 换行：tab（特殊，必须配合keydown使用）
6. 上：up
7. 下：down
8. 左：left
9. 右：right

Vue中未提供的别名按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)
系统修饰键（用法特殊）：ctrl、alt、shift、meta

1. 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
2. 配合keydown使用：正常触发事件

也可以使用keycode去指定使用的按键（不推荐）
Vue.config.keycodes.自定义键名 = 键码，可以去定制按键别名

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>键盘事件</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h2>欢迎来到{{name}}</h2>
      <input type="text" placeholder="按下按键输入" @keyup.enter="showinfo" />
      <input type="text" placeholder="按下按键输入" @keydown.enter="showinfo" />
      <input type="text" placeholder="按下按键输入" @keydown.ctrl="showinfo" />
    </div>

    <script type="text/javascript">
      new Vue({
        el: '#root',
        data: {
          name: '空谷有来人',
        },
        methods: {
          showinfo(e) {
            console.log(e.target.value)
          },
        },
      })
    </script>
  </body>
</html>

我是空谷有来人，谢谢大家支持！