Vue2中的键盘事件

分手后的思念是犯贱 2022-06-17 10:52 197阅读 0赞

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

**1.使用**

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <script src="vue.js"></script>
    
        <script type="text/javascript">
            window.onload = function(){
                var vm = new Vue({
                    el:'#box',
                    methods:{
                        show:function(ev){
                            if(ev.keyCode == 13){
                                alert('你按回车键了');
                            }
                        },
                    }
                });
            }
        </script>
    </head>
    <body>
        <div id="box">
            <input type="text" placeholder="请输入" @keyup="show($event)"> 
    
            <input type="text" placeholder="请输入" @keyup.13="show($event)">
        </div>
    </body>
    </html>

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

**两个input的效果都是一样的 如果按13  也就是按键 enter 才会执行弹窗！！  
@keyup.13 回车  
@keyup.enter 回车  
@keyup.left 左键  
@keyup.right 右键  
@keyup.up 上键  
@keyup.down 下键  
@keyup.delete 删除键**

**原文链接：[http://www.cnblogs.com/zycbloger/p/6423132.html][http_www.cnblogs.com_zycbloger_p_6423132.html]**

[http_www.cnblogs.com_zycbloger_p_6423132.html]: http://www.cnblogs.com/zycbloger/p/6423132.html

发表评论取消回复

表情：

评论列表（有 0 条评论，197人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue.js 添加键盘回车事件

方法一：现在需要给登录按钮添加一个键盘回车事件，只要一按回车键就会触发登录的方法。 //登录html 部分 <el-form-item>

绝地灬酷狼/ 2023年10月09日 05:32/ 0 赞/ 36 阅读

相关 Vue键盘事件的使用

前言在vue中，我们经常会用到键盘事件，不管是我们按下某个键，其实都是一次键盘事件的调用，下面就介绍下Vue中的键盘事件先写一段代码，这里我选择的键盘事件是keyu

骑猪看日落/ 2023年09月24日 22:31/ 0 赞/ 65 阅读

相关 Vue 键盘事件

如果vue中原生事件不起作用，可以使用 .native修饰符，语法（.native@keyup.enter） @keydown 键盘按下时触发 @keypre

客官°小女子只卖身不卖艺/ 2023年01月09日 12:35/ 0 赞/ 186 阅读

相关 vue 指令 v-on 事件修饰符-键盘事件-键盘事件梳理

<body> <div id="app"> 用户名： <input type="text" v-on:key

浅浅的花香味﹌/ 2023年01月07日 08:44/ 0 赞/ 195 阅读

相关 VUE_vue键盘回车事件无效

按键修饰符 vue中提供了一些按键修饰符，开发者可以直接通过按键修饰符捕捉键盘事件 <input v-on:keyup.enter="submit"> 但是在

怼烎@/ 2022年12月09日 13:00/ 0 赞/ 386 阅读

相关 vue监听键盘事件的相关总结

按键修饰符在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符： 1 2 <!-- 只有在 \`key\` 是

迷南。/ 2022年10月25日 00:48/ 0 赞/ 325 阅读

相关 js中的键盘事件

本文转自：http://www.cnblogs.com/rubylouvre/archive/2009/08/20/1550526.html 在进入正题前，我们看一下浏览器对

Dear 丶/ 2022年09月17日 12:25/ 0 赞/ 207 阅读

相关 Vue2中的键盘事件

Vue2键盘事件：keydown/keyup... 1.使用 <!DOCTYPE html> <html> <head> <t

分手后的思念是犯贱/ 2022年06月17日 10:52/ 0 赞/ 198 阅读

相关 vue的键盘事件直接绑定无效？

![Center][] 想给搜索框加上回车事件，方便操作，但是发现，直接写在绑定事件上必须先点击一次，获取了焦点之后再次按回车键才能触发见键盘事件。错误代码： <

妖狐艹你老母/ 2022年06月07日 05:44/ 0 赞/ 305 阅读

相关键盘事件

一介绍键盘事件包含onkeypress、onkeydown和onkeyup事件。 onkeypress事件是在键盘上的某个键被按下并且释放时触发此事件的处理程序，一般用

今天药忘吃喽~/ 2022年05月12日 00:00/ 0 赞/ 328 阅读