前端VUE3.0,DAY10，键盘事件

最新推荐文章于 2024-05-29 11:02:22 发布

疯子的梦想＠

最新推荐文章于 2024-05-29 11:02:22 发布

阅读量2.1k

点赞数

分类专栏：前端文章标签： html vue.js

本文链接：https://blog.csdn.net/weixin_48681463/article/details/119388257

版权

前端专栏收录该内容

110 篇文章 4 订阅

订阅专栏

VUE3.0,DAY10

键盘vue常用的按键别名

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.自定义键名=键码，可以去定制按键别名

按下回车键

1.在@keyup后加上enter，则表示按下回车键弹起后，相应showInfo函数。

<!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.js-->
    <script type="text/javascript" src="../vue.js"></script>
</head>

<body>
    <!--准备好一个容器-->
    <!--键盘按下事件keyup是按下键盘弹起后确认输入的字符，
    keydown是按下不弹起时就确认了输入-->
    <div id="root">
        <h1>欢迎来到{{name}}</h1>
        <!--placeholder是输入框内的提示信息-->
        <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
    </div>


</body>
<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            name: '哈哈',
        },
        methods: {
            //回车键的ascii码是13
            showInfo(e) {
                console.log(e.target.value);
                //打印输出键盘事件内输入的字符
            }
        }
    })
</script>

</html>

在这里插入图片描述

修饰按键的特殊：ctrl、alt、shift、meta

1.这四个按键叫系统修饰键，
(1).配合keyup使用:按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2) .配合keydown使用:正常触发事件。

<!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.js-->
    <script type="text/javascript" src="../vue.js"></script>
</head>

<body>
    <!--准备好一个容器-->
    <!--键盘按下事件keyup是按下键盘弹起后确认输入的字符，
    keydown是按下不弹起时就确认了输入-->
    <div id="root">
        <h1>欢迎来到{{name}}</h1>
        <!--placeholder是输入框内的提示信息-->
        <input type="text" placeholder="按下回车提示输入" @keyup.ctrl="showInfo">
    </div>


</body>
<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            name: '哈哈',
        },
        methods: {
            //回车键的ascii码是13
            showInfo(e) {

                console.log(e.target.value);
                //打印输出键盘事件内输入的字符
            }
        }
    })
</script>

</html>

在这里插入图片描述

疯子的梦想＠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端VUE3.0,DAY10，键盘事件

VUE3.0,DAY10键盘vue常用的按键别名按下回车键修饰按键的特殊：ctrl、alt、shift、meta键盘vue常用的按键别名1.Vue中常用的按键别名:回车=> enter删除=> delete (捕获"删除”和“退格”键)退出=> esc空格=> space换行=> tab上=>up下=> down左=> left右=> right2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-
复制链接

扫一扫