Vue 键盘事件

Vue 中常用的按键别名

回车：enter
退格：delete
退出：esc
空格：space
上：up
下：down
左：left
右：right

示例

<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">

实例

</details>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<div id="root">
    <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
</div>

<script type="text/javascript">
    new Vue({
        el: '#root',
        methods: {
            showInfo(e) {
                alert(e.target.value)
            }
        }
    })
</script>

</body>
</html>

Vue 中特殊的按键别名

换行：tab
ctrl、alt、shift、meta

如配合 keydown 使用：正常触发事件
如配合 keyup 使用：按下修饰键同时，需要再按下其他键，随后释放其他键，事件才会触发

posted @ 2022-04-04 15:14 春暖花开鸟阅读(97) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue 事件修饰符

· Vue 事件的基本使用

· Vue键盘事件

· [Vue]键盘事件

· VUE中的键盘事件（按键别名）

阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？