目录

1.常见的键盘事件

2.键盘按下,输出输入框中输入的值

 3.(普通方式)只有按下回车的时候,才会输出输入框中输入的值

 4.(Vue方式)只有按下回车的时候,才会输出输入框中输入的值

5.Vue中常用的按键别名

6.Vue中未提供别名的按键处理

7.Vue中用法特殊的系统修饰键:ctrl,alt,shift,meta(window徽标键,4个方块的那个)

8.使用keyCode指定具体的按键(不推荐)

9.自定义按键别名并绑定


1.常见的键盘事件

keydown:按下键盘,不需要抬起来就会触发

keyup:按下键盘,等键盘抬起来才会触发

2.键盘按下,输出输入框中输入的值

<!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>键盘事件</title>
    <!--引入Vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        
    </style>
</head>
<body>
    <!--准备好一个容器-->
    <div id="root">
        <h2>欢迎学习{{name}}</h2>
        <input type="text" placeholder="按下回车提示输入" @keyup="showInfo">
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止Vue在启动时生成生产提示

    const vm = new Vue({
        el:'#root',
        data:{
            name:'Vue专栏'
        },
        methods: {
            showInfo(e){
                console.log(e.target.value)
            }

        },  
    })
</script>
</html>

实现效果:

 3.(普通方式)只有按下回车的时候,才会输出输入框中输入的值

<!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>键盘事件</title>
    <!--引入Vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        
    </style>
</head>
<body>
    <!--准备好一个容器-->
    <div id="root">
        <h2>欢迎学习{{name}}</h2>
        <input type="text" placeholder="按下回车提示输入" @keyup="showInfo">
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止Vue在启动时生成生产提示

    const vm = new Vue({
        el:'#root',
        data:{
            name:'Vue专栏'
        },
        methods: {
            showInfo(e){
                //keyCode为13代表回车键
                if(e.keyCode !== 13) return
                console.log(e.target.value)
            }

        },  
    })
</script>
</html>

 实现效果:

 4.(Vue方式)只有按下回车的时候,才会输出输入框中输入的值

<!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>键盘事件</title>
    <!--引入Vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        
    </style>
</head>
<body>
    <!--准备好一个容器-->
    <div id="root">
        <h2>欢迎学习{{name}}</h2>
        <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止Vue在启动时生成生产提示

    const vm = new Vue({
        el:'#root',
        data:{
            name:'Vue专栏'
        },
        methods: {
            showInfo(e){
                console.log(e.target.value)
            }

        },  
    })
</script>
</html>

 实现效果:

5.Vue中常用的按键别名

通过上述@keyup.enter来控制键盘事件的方式就是Vue中的按键别名。

那么Vue中常用的按键别名有以下几种:

回车:enter

删除:delete (捕获"删除"和"退格"键)

退出:esc

空格:space

换行:tab(特殊:必须配合keydown使用)

上:up

下:down

左:left

右:right

6.Vue中未提供别名的按键处理

Vue中未提供别名的按键可以使用按键原始的key值取绑定,首先注意

如果按键是多个单词的,则单词和单词之间需要用-相隔,且多个单词都要转小写。

按键key获取方式:

<!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>键盘事件</title>
    <!--引入Vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        
    </style>
</head>
<body>
    <!--准备好一个容器-->
    <div id="root">
        <h2>欢迎学习{{name}}</h2>
        <input type="text" placeholder="按下回车提示输入" @keyup="showInfo">
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止Vue在启动时生成生产提示

    const vm = new Vue({
        el:'#root',
        data:{
            name:'Vue专栏'
        },
        methods: {
            showInfo(e){
                console.log(e.key,e.keyCode);
                //console.log(e.target.value)
            }

        },  
    })
</script>
</html>

以CapsLock来举例,它是两个单词组成的,所以键盘事件需要这样写:

@keyup.caps-lock

7.Vue中用法特殊的系统修饰键:ctrl,alt,shift,meta(window徽标键,4个方块的那个)

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

 (2).配合keydown使用:正常触发事件。

8.使用keyCode指定具体的按键(不推荐)

刚刚我们使用了键名指定,键的别名,其实我们还可以使用键的编码指定

比如enter键的编码是13,那我们就可以使用13去指定按键事件:

<!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>键盘事件</title>
    <!--引入Vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        
    </style>
</head>
<body>
    <!--准备好一个容器-->
    <div id="root">
        <h2>欢迎学习{{name}}</h2>
        <input type="text" placeholder="按下回车提示输入" @keyup.13="showInfo">
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止Vue在启动时生成生产提示

    const vm = new Vue({
        el:'#root',
        data:{
            name:'Vue专栏'
        },
        methods: {
            showInfo(e){
                console.log(e.key,e.keyCode);
                //console.log(e.target.value)
            }

        },  
    })
</script>
</html>

执行效果:

 但是这种方式是不推荐的

我们在mdn中搜索keycode,可以看到:

KeyboardEvent.keyCode - Web API 接口参考 | MDN这个只读的属性 KeyboardEvent.keyCode 代表着一个唯一标识的所按下的键的未修改值,它依据于一个系统和实现相关的数字代码。这通常是与密钥对应的二进制的ASCII (RFC 20)或Windows 1252 码。如果这个键不能被标志,这个值为0。https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/keyCode

这种方式是被废弃的, 这是因为不同的键盘的编码有点不统一,这样可能会有问题。

9.自定义按键别名并绑定

 我们可以使用Vue.config.keyCodes.自定义键名 = 键码,去定制按键别名

<!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>键盘事件</title>
    <!--引入Vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        
    </style>
</head>
<body>
    <!--准备好一个容器-->
    <div id="root">
        <h2>欢迎学习{{name}}</h2>
        <input type="text" placeholder="按下回车提示输入" @keyup.huiche="showInfo">
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
    Vue.config.keyCodes.huiche = 13;
    const vm = new Vue({
        el:'#root',
        data:{
            name:'Vue专栏'
        },
        methods: {
            showInfo(e){
                console.log(e.key,e.keyCode);
                //console.log(e.target.value)
            }

        },  
    })
</script>
</html>

执行效果: