Vue2中的键盘事件

最新推荐文章于 2024-04-07 21:41:30 发布

梁萌

最新推荐文章于 2024-04-07 21:41:30 发布

阅读量1.6k

点赞数 1

分类专栏： vue 文章标签： Vue实现键盘事件

本文链接：https://blog.csdn.net/liangmengbk/article/details/83541464

版权

vue 专栏收录该内容

45 篇文章 3 订阅

订阅专栏

在HTML中的键盘事件有：

1.onkeydown 事件会在用户按下一个键盘任意按键时触发，如果按住不放，则会重复触发此事件。

2.onkeypress 事件会在用户按下键盘上的字符键时触发，如果按住不放，则会重复触发。

3.onkeyup 事件会在键盘按键被松开时触发。

实例：

当用户按下键盘时弹出警示框显示键值

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <input type="text" id="myText">
    <script type="text/javascript">
    var oText = document.getElementById("myText");
    oText.onkeydown = function() {
        alert(event.keyCode); //输出键值
    }
    </script>
</body>

</html>

那么在Vue2中我们该如何实现键盘事件呢？

Vue2键盘事件：keydown/keyup...

下面用一个列子说明如何使用：

HTML代码：

<div id="box">
   <input type="text" placeholder="请输入" @keyup="show($event)">
   <input type="text" placeholder="请输入" @keyup.13="show($event)">
</div>

JavaScript代码：

var vm = new Vue({
   el:'#box',
   methods:{
           show:function(event){
             if(event.keyCode == 13){
                 alert('你按回车键了');
             }
         },
   }
});

当按下键盘的时候，执行show方法，然后再去执行相应的业务。

上面两个按钮的效果是一样的，因为回车键（Enter）的键盘代码是13

关于键盘值，可以查看详细的键盘键值表

这里列举一些常用的键盘事件：

@keyup.13 回车
@keyup.enter 回车
@keyup.left 左键
@keyup.right 右键
@keyup.up 上键
@keyup.down 下键
@keyup.delete 删除键

原文链接：http://www.cnblogs.com/zycbloger/p/6423132.html

梁萌

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue2中的键盘事件

在HTML中的键盘事件有：1.onkeydown 事件会在用户按下一个键盘任意按键时触发，如果按住不放，则会重复触发此事件。2.onkeypress 事件会在用户按下键盘上的字符键时触发，如果按住不放，则会重复触发。3.onkeyup 事件会在键盘按键被松开时触发。实例：当用户按下键盘时弹出警示框显示键值&lt;!DOCTYPE html&gt;&lt;html lan...
复制链接

扫一扫