事件处理_3键盘事件

事件处理_3键盘事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/vue.js"></script>
</head>
<body>

    <!-- 
        1、Vue中常用按键的别名:
            回车:enter
            删除:delete(捕获“删除”和“退格键”)
            退出:esc
            空格:space
            换行:tab(特殊,必须配合keydown去使用)
            上:up
            下:down
            左:left
            右:right

        2、Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)、

        3、系统修饰键(用法特殊):ctrl、alt、shift、meta
            (1)配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才能触发
            (2)配合keydown使用:正常触发事件

        4、也可以使用keyCode去指定具体的按键(不推荐)

        5、Vue.config.keyCodes.自定义键名 = 键码  可以去定制按键别名
     -->

    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <input type="text" placeholder="按下回车提示输入" @keyup.ctrl="showInfo">
    </div>
    
    <script>
        new Vue({
            el:'#root',
            data:{
                name:'尚硅谷'
            },
            methods: {
                showInfo(e){
                    console.log(e.key,e.keyCode)
                    // if(e.keyCode != 13) return 
                    // console.log(e.target.value)
                }
            },
        })
    </script>
</body>
</html>
posted @   枫叶红时  阅读(22)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示