详解Vue的键盘事件

 更新时间:2022年01月07日 15:05:50   作者:QM.bear!  
这篇文章主要为大家介绍了Vue的键盘事件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

在js中我们要获取一个按键的编码通常需要通过(keydown/keyup)去绑定一个事件,再通过默认参数event中的keyCode属性去取得编码。如果我们要实现按固定的键才能触发事件时就需要在事件中进行不断的判断,这样会显的很麻烦,如

var input = document.querySelector('input')
    input.onkeyup = function (e) {
        if (e.keyCode == 13)
            console.log('我是回车键')
    }

在vue中就为我们一些常用的按键提供了别名,并且只需要我们在事件后加上相应别名即可,不需要我们手动的在事件中进行判断。

常用按键别名

Vue中为一些常用的按键绑定了别名,分别有以下几种。

  • 上箭头:up
  • 下箭头:down
  • 左箭头:left
  • 右箭头:right
  • 空格:space
  • 换行:tab
  • 退出:esc
  • 回车:enter
  • 删除/退格:delete

别名可用来限制键盘事件(keydown、keyup),只有按下键的是与别名一致时才会去执行所绑定的事件

<input v-on:keyup.enter="showtip" type="text">
只有按下回车键时才会执行showtip方法

另外,tab键只适合与keydown一起使用,在浏览器中tab本身就已经绑定了事件:切换焦点,所以在按下放开tab键后就会触动默认的事件,而忽视了keyup所绑定的事件。而使用keydown就能避过这一情况,在tab按下的那一瞬间便会执行所绑定的事件。

未提供别名的键

另外,在vue中未提供别名的按键,vue也为我们提供了一种方法去使用。vue中规定未提供别名的按键,可使用按键原始的key值去绑定,所谓key值就是由event.key获得的值。如

var input = document.querySelector('input')
    input.onkeyup = function (e) {
       console.log(e.key)
       }

以上代码在我们按下任意一键时在控制台就会输出对应的key值,分别按下大小写切换键、Q以及W键会得到以下值

我们就可以使用key值作为按键的别名,特别要注意的是如果key值是单个字母或单词直接使用key值就可以了,但是如果由多个单词组成如大小写切换键就为两个单词的结合,这个时候就要把key值进行改动,使用短横线命名法则将CapsLock-->caps-lock就可以使用了

<input v-on:keyup.Q="showtip" type="text">
//只有按下q键时才会执行showtip方法
<input v-on:keyup.caps-lock="showtips" type="text">
//只有按下capslock键时才会执行showtips方法

系统修饰键

所谓系统修饰键就是ctrl、alt、shift等。这些键的使用比较来说有点复杂,主要分为以下两种情况

1.当触发事件为keyup时,按下修饰键的同时要按下其他键,再释放其他键,事件才能被触发。

<input v-on:keyup.Alt="showtips" type="text">
//按下alt键后再按任意一键,然后再释放任意键后便会执行showtips方法
//以上的步骤太过麻烦我们可以这样写
<input v-on:keyup.Alt.y="showtips" type="text">
//当按alt y时就会触发事件而不用先按alt再按y再放y

当触发事件为keydown时,直接按下修饰键。

<input v-on:keydown.Alt="showtips" type="text">
//只有按下alt键时才会执行showtips方法

自定义按键别名

vue中为我们提供了自定义按键别名的方法,通过(Vue.config.keyCodes.自定义键名=键码)的方式去定义

<input v-on:keydown.en="showtips" type="text">
//只有按下回车键时才会执行showtips方法
Vue.config.keyCodes.en=13
//13是回车键的键码,将他的别名定义为en

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容! 

相关文章

  • element-UI el-table树形数据 修改小三角图标方式

    element-UI el-table树形数据 修改小三角图标方式

    这篇文章主要介绍了element-UI el-table树形数据 修改小三角图标方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • 在Vue3中使用Vue Tour实现页面导览

    在Vue3中使用Vue Tour实现页面导览

    Vue Tour 是一个方便的 Vue.js 插件,它可以帮助我们在网站或应用中实现简单而灵活的页面导览功能,本文我们将介绍如何在 Vue 3 中使用 Vue Tour,并通过示例代码演示其基本用法,需要的朋友可以参考下
    2024-04-04
  • 通过vue.extend实现消息提示弹框的方法记录

    通过vue.extend实现消息提示弹框的方法记录

    这篇文章主要给大家介绍了关于通过vue.extend实现消息提示弹框的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • Vue3实现九宫格抽奖的示例代码

    Vue3实现九宫格抽奖的示例代码

    这篇文章主要为大家详细介绍了如何利用Vue3实现九宫格抽奖的功能,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的可以了解一下
    2022-09-09
  • vue 实现模糊检索并根据其他字符的首字母顺序排列

    vue 实现模糊检索并根据其他字符的首字母顺序排列

    这篇文章主要介绍了vue 实现模糊检索,并根据其他字符的首字母顺序排列,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • vue使用国密SM4进行加密、解密的过程

    vue使用国密SM4进行加密、解密的过程

    国密SM4算法是一种对称加密算法,适用于对称密钥加密和解密的场景,这篇文章主要介绍了vue使用国密SM4进行加密、解密,需要的朋友可以参考下
    2023-07-07
  • Vue+Echarts实现绘制多设备状态甘特图

    Vue+Echarts实现绘制多设备状态甘特图

    这篇文章主要为大家详细介绍了Vue如何结合Echarts实现绘制多设备状态甘特图,文中的示例代码讲解详细,有需要的小伙伴可以跟随小编一起学习一下
    2024-03-03
  • 最基础的vue.js双向绑定操作

    最基础的vue.js双向绑定操作

    这篇文章主要为大家详细介绍了最基础的vue.js双向绑定操作,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 使用Vuex解决Vue中的身份验证问题

    使用Vuex解决Vue中的身份验证问题

    这篇文章主要介绍了使用Vuex解决Vue中的身份验证问题,本文通过文字实例相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-09-09
  • Vue+node实现音频录制播放功能

    Vue+node实现音频录制播放功能

    这篇文章主要介绍了Vue+node实现音频录制播放,功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-03-03

最新评论