05_键盘事件

cnbyboy

2023-6-28

默认

键盘事件

常用的键盘事件有两种，分别是keyup（按下后抬起触发）和keydown（按下即刻持续触发）

vue提供了常用的按键别名：

回车：keyup.enter

删除：keyup.delete

退出：keyup.esc

空格：keyup.space

换行：keyup.tab（必须配合keydown使用）

上：keyup.up

下：keyup.down

左：keyup.left

右：keyup.right

<body>
  <div id="app">
    <p></p>
    <input type="text" placeholder="按下回车提交" @keyup.enter="showInfo" />
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      methods: {
        showInfo() {
          console.log('按下了Enter键');
        },
      },
    });
  </script>
</body>

vue未提供别名的按键使用按键原始的key值去绑定（多个按此组成的按键需要使用-连接才能触发）：

<body>
  <div id="app">
    <p></p>
    <input type="text" placeholder="按下CapsLock切换大小写" @keyup.caps-lock="showInfo" @keyup.s="save" />
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      methods: {
        showInfo(event) {
          // 获取按键
          // console.log(event.key, event.keyCode);
          console.log('按下了CapsLock');
        },
        save() {
          console.log('按下了S');
        },
      },
    });
  </script>
</body>

vue未提供别名的按键使用按键原始的keyCode值去绑定（不推荐）：

<body>
  <div id="app">
    <p></p>
    <input type="text" placeholder="Q、W、E、R、Enter" @keyup="showInfo" @keyup.13="enter" />
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      methods: {
        showInfo(event) {
          // 获取按键
          // console.log(event.key, event.keyCode);
          if (event.keyCode == 81) {
            console.log('按下了Q键');
          } else if (event.keyCode == 87) {
            console.log('按下了W键');
          } else if (event.keyCode == 69) {
            console.log('按下了E键');
          } else if (event.keyCode == 82) {
            console.log('按下了R键');
          }
        },
        enter() {
          console.log('按下了Enter');
        },
      },
    });
  </script>
</body>

系统修饰键：ctrl、alt、shift、meta（win键）

配合keyup使用：按下修饰键的同时，在按下其他键，抬起后其他键，事件才能被触发事件

<body>
  <div id="app">
    <p></p>
    <input type="text" placeholder="按下Ctrl+Q，抬起Q触发" @keyup.ctrl="showInfo" />
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      methods: {
        showInfo(event) {
          // 获取按键
          // console.log(event.key, event.keyCode);
          console.log('按下了Ctrl');
        },
      },
    });
  </script>
</body>

配合keydown使用：正常触发事件

Vue.config.keyCodes.自定义键名 = 键码，可以绑定别名

<body>
  <div id="app">
    <p></p>
    <input type="text" placeholder="Enter" @keyup.huiche="showInfo" />
  </div>
  <script>
    Vue.config.keyCodes.huiche = 13;
    const vm = new Vue({
      el: '#app',
      methods: {
        showInfo(event) {
          // 获取按键
          // console.log(event.key, event.keyCode);
          console.log('按下了回车');
        },
      },
    });
  </script>
</body>

阅读剩余

THE END