按键修饰符 vue

最新推荐文章于 2025-06-23 23:32:28 发布

原创最新推荐文章于 2025-06-23 23:32:28 发布 · 246 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

1. 常用的按键修饰符

.enter

回车键：<input type="text" @keyup.enter="getInfo" /> //@keyup.enter代表enter
      <hr />
回车键（键值）：<input type="text" @keyup.13="getInfo" /> //@keyup.13代表enter
      <hr />
huiche键： <input type="text" @keyup.huiche="getInfo" />
      <hr />
  <script>
      // 自定义了一个按键修饰符：.huiche 。代表回车键。
    Vue.config.keyCodes.huiche = 13; //huiche自定义的名字 13是enter
console.log(event.key, "key值"); //判断按下的值的名字

.delete (捕获“删除”和“退格”键)

delete键：<input type="text" @keyup.delete="getInfo" />

.esc

esc键：<input type="text" @keyup.esc="getInfo" />

.space

space键：<input type="text" @keyup.space="getInfo" />

.up（↑）

up键：<input type="text" @keyup.up="getInfo" />

.down（↓）

down键：<input type="text" @keyup.down="getInfo" />

.left（←）

left键：<input type="text" @keyup.left="getInfo" />

.right（→）

right键：<input type="text" @keyup.right="getInfo" />

获取某个键的按键修饰符

console.log(event.key, "key值") //通过event.key获取这个键的真实名字
  // 获取了PageDown的按键名
<input type="text" @keyup.page-down="getInfo" /> //fn+↓

ctrl键(keydown)：

<input type="text" @keydown.ctrl="getInfo" />

ctrl键(keyup) ctrl+任意一个键：

<input type="text" @keyup.ctrl="getInfo" />

ctrl键(keyup) ctrl+定义的键：

<input type="text" @keyup.ctrl.b="getInfo" /> //ctrl+b触发
<input type="text" @keyup.ctrl.i="getInfo" /> //ctrl+i触发

完整代码

<body>
    <div id="app">
      <h1>{{msg}}</h1>
      <!-- 1、演示9个常用按键修饰符
            .enter
            .delete (捕获“删除”和“退格”键)
            .esc
            .space
            .up
            .down
            .left
            .right
            .tab （必须配合keydown事件使用。）
      -->
      回车键：<input type="text" @keyup.enter="getInfo" />
      <hr />
      回车键（键值）：<input type="text" @keyup.13="getInfo" />
      <hr />
      delete键：<input type="text" @keyup.delete="getInfo" />
      <hr />
      esc键：<input type="text" @keyup.esc="getInfo" />
      <hr />
      space键：<input type="text" @keyup.space="getInfo" />
      <hr />
      up键：<input type="text" @keyup.up="getInfo" />
      <hr />
      down键：<input type="text" @keyup.down="getInfo" />
      <hr />
      left键：<input type="text" @keyup.left="getInfo" />
      <hr />
      right键：<input type="text" @keyup.right="getInfo" />
      <hr />
      <!-- tab键无法触发keyup事件。只能触发keydown事件。 -->
      tab键： <input type="text" @keyup.tab="getInfo" />
      <hr />
      tab键（keydown）： <input type="text" @keydown.tab="getInfo" />
      <hr />

      <!-- 2、其他按键修饰符 mac  fn+向下 -->
      PageDown键： <input type="text" @keyup.page-down="getInfo" />
      <hr />
      <!-- 3、自定义按键修饰符 -->
      huiche键： <input type="text" @keyup.huiche="getInfo" />
      <hr />
      <!-- 4、系统修饰键： ctrl、alt、shift、meta -->
      ctrl键(keydown)： <input type="text" @keydown.ctrl="getInfo" />
      <hr />
      <!-- ctrl+其他键 -->
      ctrl键(keyup)： <input type="text" @keyup.ctrl="getInfo" />
      <hr />
      <!-- ctrl+i键时才能触发 -->
      ctrl键(keyup)： <input type="text" @keyup.ctrl.b="getInfo" />
      <hr />
    </div>
    <script>
      // 自定义了一个按键修饰符：.huiche 。代表回车键。
      Vue.config.keyCodes.huiche = 13;

      const vm = new Vue({
        el: "#app",
        data: {
          msg: "按键修饰符",
        },
        methods: {
          getInfo(event) {
            // 当用户键入回车键的时候，获取用户输入的信息。
            // if (event.keyCode === 13) {
              console.log(event.target.value, "value值");
            // }
            // console.log(event.key, "key值"); //名字
            console.log(event.keyCode, "keyCode值"); //数字
          },
        },
      });
    </script>
  </body>