Vue2中的键盘事件

分手后的思念是犯贱 2022-06-17 10:52 183阅读 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 条评论，183人围观）

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

相关阅读

相关 3.Vue—绑定事件、事件修饰符、键盘事件（详细）

目录一、绑定事件 1.1 简单事件回调 1.2 传入参数 1.2.1 调用时无参 1.2.2 调用时传参 1.2.3 细节问题二、事件修饰符 2.1 pre

柔光的暖阳◎/ 2024年04月08日 13:14/ 0 赞/ 70 阅读

相关 Vue框架学习笔记——键盘事件

文章目录前文提要键盘事件（并不是所有按键都能绑定键盘事件）常用的按键不同的tab和四个按键 keyCode绑定

￡神魔★判官ぃ/ 2024年02月17日 10:30/ 0 赞/ 43 阅读

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

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

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

相关 Vue键盘事件的使用

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

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

相关 Vue 键盘事件

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

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

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

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

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

相关 VUE_vue键盘回车事件无效

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

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

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

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

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

相关 js中的键盘事件

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

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

相关 Vue2中的键盘事件

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

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