【Vue】通过text按键执行事件，并且获取到按键的名称和编码-CFANZ编程社区

【Vue】通过text按键执行事件，并且获取到按键的名称和编码_回车键

【1】、Vue中常用的按键别名：

回车：enter

删除：delete(捕获"删除和退格")

退出：esc

空格：space

换行：tab

上：up

下：down

左：left

右：right

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

【3】、系统修饰键（用法特殊）：ctrl、alt、shift、meta

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

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

【4】、也可以使用keyCode去指定具体的按键（不推荐）

【5】、Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名。

【6】、如果是ctrl+y快捷键，@keyup.ctrl.y执行事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #root {
        background-color: antiquewhite;
        height: 150px;
    }

    input {
        height: 30px;
        width: 200px;
        background-color: rgb(240, 238, 238);
        border-radius: 10px;
        border: 1px rgb(192, 192, 192) solid;
    }
</style>

<script src="vue.js"></script>

<body>

    <!-- 
        
        【1】、Vue中常用的按键别名：

        回车：enter
        删除：delete(捕获"删除和退格")
        退出：esc
        空格：space
        换行：tab
        上：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.space.enter="pro">
        <!-- 如果是ctrl+y快捷键，@keyup.ctrl.y执行事件 -->
         <!-- <input type="text" placeholder="按下回车键确认输入" @keyup.ctrl.y="pro"> -->

    </div>

    <!-- 按下键后，获取到这个键是什么键（键码或键值） -->

    <div id="keyValue">
        <input type="text" placeholder="获取按下键后的键值" @keyup="keys">
    </div>

</body>

<script type="text/javascript">
    var root = new Vue({
        el: '#root',
        data: {
            name: "邯郸"
        },
        methods: {
            pro(e) {
                // if (e.key = 13) {console.log(e.target.value)}
                console.log(e.target.value); // 显示当前元素的值
            }
        }
    })


    var keyValue = new Vue({
        el: '#keyValue',
        data: {
            name: "邯郸"
        },
        methods: {
            keys(e) {
                // if (e.key = 13) {console.log(e.target.value)}
                console.log(e.key, e.keyCode); // 显示按键的名称和编码
            }
        }
    })
</script>


</html>