Vue2基础篇-09-键盘事件

最新推荐文章于 2023-10-12 17:46:45 发布

Alan0517

最新推荐文章于 2023-10-12 17:46:45 发布

阅读量358

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Hmj050117/article/details/128218580

版权

Vue2+Ts-基础篇专栏收录该内容

40 篇文章 3 订阅

订阅专栏

1. demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title> 键盘事件</title>
    <script type="text/javascript" src="../vue.js"></script>
</head>
<body>
    <div id="root">
        <input type="text" placeholder="按下回车提示输入" @keyup="showInfo">
    </div>
    <script text="text/javascript">
        new Vue({
            el: "#root",
            methods: {
                showInfo(e) {
                    console.log(e.key, e.keyCode)
                    alert("hello")
                },
            },
        })
    </script>
</body>
</html>

2. 小总结

<!--  小总结：
    Vue中常用的按键别名：
       1. 回车  => enter
       2. 删除  => delete (捕获"删除"和"退格"键)
       3. 退出  => esc
       4. 空格  => space
       5. 换行  => tab
       6. 上    => up
       7. 下    => down
       8. 左    => left
       9. 右    => right
  
    2. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为 kebab-case (短横线命名)
    
    3. 系统修饰键(用法特殊)： ctrl,alt,shift,meta
       1. 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
       2. 配合keydown使用： 正常触发事件。
    
    4. 也可以使用keyCode 去指定具体的按键(不推荐)
    5. Vue.config.keyCodes.自定义键名=键码。可以去定制按键别名
 -->