Vue键盘事件的使用

这篇具有很好参考价值的文章主要介绍了Vue键盘事件的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

在vue中,我们经常会用到键盘事件,不管是我们按下某个键,其实都是一次键盘事件的调用,下面就介绍下Vue中的键盘事件

先写一段代码,这里我选择的键盘事件是keyup,当然用keydown也是没问题的

Vue键盘事件的使用

Vue键盘事件的使用

问题来了,什么按键都能触发事件,我们期望的是只能按下回车键才能打印输入的值, 那么:如何判断回车呢?

传统方式判断案件编码

最原始的办法,就是判断按键编码

           <input type="text" placeholder="按下回车提示输入"@keyup="showInfo">
           
           showInfo(e){
                    // 如果按键没有按回车,就不打印日志 13就是回车键的编码
                    if(e.keyCode!==13){
                        return;
                    }
                    console.log(e.target.value)
                }   

Vue键盘事件的使用

查看页面,我们发现功能已经实现了,我们输入内容必须按下回车,才能打印日志,按其他键都不好使

Vue键盘事件的使用

vue判断案件编码

在vue中,我们不用亲自判断按键编码,我们只需要在事件后面跟上修饰.enter就代表回车了

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

Vue键盘事件的使用

Vue键盘事件的使用

vue中9个按键别名

通常称enter为别名,vue给按键都起了别名,一共有九个:
回车:enter
删除(退格):delete
退出:esc
空格:space
换行:tab(特殊,必须配合keydown使用)
上:up
下:down
左:left
右:right

vue自定义绑定按键

如果我们想要绑定的按键不在vue提供的9个按键内,那该怎么办呢?比如我就想要用CapsLock(切换大小写)

首先要知道:键盘上任意的一个按键都有自己的按键和编码

我们可以通过key和keyCode分别获取案件名称和对应的编码

Vue键盘事件的使用

按下键盘的caps,看到控制台提示按键叫CapsLock,对应的编码为20

Vue键盘事件的使用

多个单词按键特殊处理

上面我们已经知道了,大小写的按键叫CapsLock,那么我们直接使用,CapsLock是否就能直接限制只能大小写按键呢?

Vue键盘事件的使用

答案是否定的,按下caps切换大小写没有任何反应

Vue键盘事件的使用

这里就要强调下了,在vue中这种多个单词的情况下,不能写原生的按键名称,要把首字母的大写全部换成小写,并且直接用-进行拼接

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

Vue键盘事件的使用

再次测试解决问题,这种情况较少,我们需要格外注意

Vue键盘事件的使用

不是全部的按键都能绑定事件的,个别特殊按钮也是不行的

5个特殊按键

在一些按键中,因为特殊的机制,需要我们特殊处理,我们简单介绍下

tab按键

我们都知道,tab按键可以转移光标,这个按键比较特殊,我们不能直接使用tab去绑定事件,不然会发现是无效的,只会切换光标

Vue键盘事件的使用

Vue键盘事件的使用

所以当使用tab的时候,不应该使用keyup,应该使用keydown

Vue键盘事件的使用

发现虽然光标已经移走了,但是已经实现了我们的需求

Vue键盘事件的使用

ctrl,alt,shift,meta(window)按键

这四个按键我们一般称为系统修饰键(用法比较特殊),我们一般使用keydown而不是keyup按键

1 配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才能触发

2 配合keydown使用:正常触发事件

如果我们非要用keyup事件,需要配合一个其他按键,任意的都行,我们以ctrl为例

Vue键盘事件的使用

我这里按的是ctrl+Q 触发事件

Vue键盘事件的使用

如果是使用keydown,就没有这么麻烦了,我们直接按下ctrl即可

Vue键盘事件的使用

我这里只按下了ctrl

Vue键盘事件的使用

通过键玛绑定按键事件

上面我们的案例都是绑定按键名,我们知道每一个按键都有对应的键码,我们可以通过键码去绑定事件,我这里以enter(回车)为例,它的键码是13

Vue键盘事件的使用

也是没有任何问题的

Vue键盘事件的使用

但是通过键码绑定按键事件的方式已经不推荐使用了,原因如下

部分浏览器已经不支持按键编码绑定事件的格式的,而且这种方式正常被废除,不同的电脑的按键有可能是不同的,也会造成不必需要的麻烦

所以我们应该少用甚至不用这种方式,应该使用按键名称绑定事件

Vue键盘事件的使用

自定义按键别名

我们上述使用的按键名称,比如enter回车,都是vue帮我们定义的,我们也可以自定义一些别名

比如我不想用enter,就想叫huiche,这时候怎么处理呢?

其实vue也给我们提供了解决方法,我们可以使用Vue.config.keyCodes去定义,语法如下

  // 定义了一个叫huiche的别名按键,这个按键对应的键码是13,也就是enter回车键
        Vue.config.keyCodes.huiche=13 

Vue键盘事件的使用

按下enter回车键,效果一样的

Vue键盘事件的使用

但是这种方式也是不推荐的,一般vue给我们提供的别名就够用了,代码如下:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h2>欢迎学习:{{name}}</h2>
       <input type="text" placeholder="按下回车提示输入" @keydown.huiche ="showInfo">
    </div> 
    <script type="text/javascript">
        Vue.config.keyCodes.huiche=13 // 定义了一个叫huiche的别名按键,这个按键对应的键码是13,也就是enter回车键
        const vm=new Vue({
            el:'#root',
            data:{
                name:'vue'
            },
            methods:{
                showInfo(e){            
                     
                    console.log(e.target.value)
                }   
            }
        }) 
    </script>
</body>

</html>

多个按键拼接使用

这时候有个需求,必须是按下ctrl+y只会才能打印日志,那么这时候我们可以这样,在ctrl后拼接y

 // ctrl+y一起按 
       <input type="text" placeholder="按下回车提示输入" @keydown.ctrl.y ="showInfo">

Vue键盘事件的使用

发现没有问题,只能是ctrl+y才会触发事件打印日志

Vue键盘事件的使用文章来源地址https://www.toymoban.com/news/detail-484492.html

到了这里,关于Vue键盘事件的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue的鼠标键盘事件

    鼠标事件(将v-on简写为@) 键盘事件 输入框事件 但是element-ui在实际使用时,前四条触发方法全部都是input方式( 在 Input 值改变时触发 )触发,遂使用原生的@blur才完成效果 表单输入相关修饰符  .lazy     input 输入完毕时 .number   input只获取数字类型的输入 .trim   去除用户输入中

    2024年02月07日
    浏览(48)
  • Vue学习:键盘事件

    input表单占位符-显示输入先的提示文本-placeholder属性 键盘事件@keydown——按下 不需要松手 @keyup:按下+松手 根据按键编码进行判断 --输出event上有一个属性-keyCode -按键编码--回车=13 在vue上自带,回车修饰 enter 也就是别名:vue给常用的按键取了别名--一共有9个         回车

    2024年02月08日
    浏览(30)
  • vue键盘和鼠标事件

    1、键盘事件 2、组合按键 3、鼠标事件 可以下列方法判断按下鼠标哪个键

    2024年02月13日
    浏览(46)
  • 工作中,我们经常用到哪些SQL语句呢?

    目录 一、DDL部分(create、drop、alter) 1.1 create 语句上 1.2 drop 语句 1.3 alter 语句 二、DML(数据操纵语言)和DQL(数据查询语言) 2.1 insert 语句 2.2 update 语句 2.3 delete 语句 2.4 select 语句 2.5 其他操纵语言 2.5.1 truncate 语句 2.5.2 merge 语句 三、用户角色权限 3.1 用户相关 3.1.1 创建用户

    2024年02月03日
    浏览(43)
  • vue监听鼠标与键盘事件

     效果:  

    2024年02月16日
    浏览(37)
  • vue按钮绑定回车(键盘事件)

    但是,这种方式只能在该按钮获取到光标之后才能绑定回车键,也就是说你需要先用鼠标点击一下触发绑定回车的操作。

    2024年02月16日
    浏览(51)
  • 【前端学习日记】Vue中的鼠标事件和键盘事件

    Vue提供了很好用的模板语法,包括插值语法 {{ }} 和指令语法v-?。使用指令语法很容易就可以为文档对象添加事件。 比较常用到的事件就是鼠标事件了。当用户使用鼠标点击网页上的某个元素,或者使用键盘按下某个键,会执行对应的回调(callback),进而在短时间内产生动

    2024年02月11日
    浏览(40)
  • 我们在选择服务器的时候,经常会看到单线服务器,多线服务器和BGP服务器,那这些线路的服务器有存在哪些不同呢?

    我们在选择服务器的时候,经常会看到单线服务器,多线服务器和BGP服务器,那这些线路的服务器有存在哪些不同呢? 单线 所谓的单线服务器是单网卡单个IP,指只有电信、联通或者移动一条线路。 缺点:由于线路单一,所选线路为电信线路时,联通或移动的用户访问时可

    2024年02月12日
    浏览(53)
  • Vue键盘按键别名/事件说明及案例

    Vue中的按键别名(): 回车 = enter 删除 = delete (退格 、 删除 按键) 退出 = esc 空格 = space 换行 = tab (必须配合 keydown 去使用) 上 = up 下 = down 左 = left 右 = right 如果没有内置别名可以 组合: 组合类 = shift + tab 监听事件: keydown :当用户按下任意键时触发。 keyup :当用户释

    2024年01月18日
    浏览(41)
  • vue+ElementUI el-table表格单元格编辑增加键盘事件功能(向上、向下、回车键盘事件)

    1、如果单元格编辑使用了插槽功能,需要在插槽上添加一个class(这个类即:当前列的porp值) 2、porp不能重复(正常也不会存在) GitHub源码地址 Gitee源码地址 基于ElementUi或Antd再次封装基础组件文档 TTable组件封装地址

    2024年02月11日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包