详解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

总结

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

赞 (0)

相关推荐

  • vue 项目软键盘回车触发搜索事件

    vue 项目软键盘回车触发搜索事件

    目的:掉起来右下角为搜索的按钮 步骤: 1.input的type改为search,再写keydown按下时的事件调取搜索事件的方法 这样安卓手机上回车就变成了"搜索",不过ios仍然是换行 2.input 外面套form,必须要有action,action="javascript:return true" 我的项目用van:想弹出数字键盘,并监听搜索(换行),在安卓上执行搜索按钮,在ios 执行blur,因为安卓上点完成不执行blur <form @submi

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

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

    按键修饰符 在监听键盘事件时,我们经常需要检查详细的按键.Vue 允许为 v-on 在监听键盘事件时添加按键修饰符: <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --> <input v-on:keyup.enter="submit"> 你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符. <input v-on:keyup.page-down=&quo

  • Vue键盘事件用法总结

    这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记,学习一下Vue键盘事件 键盘事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/Vue.js" charset="utf-8"></sc

  • vue监听键盘事件的快捷方法【推荐】

    在我们的项目经常需要监听一些键盘事件来触发程序的执行,而Vue中允许在监听的时候添加关键修饰符: <input v-on:keyup.13="submit"> 对于一些常用键,还提供了按键别名: <input @keyup.enter="submit"> <!-- 缩写形式 --> 全部的按键别名: .enter  .tab  .delete (捕获"删除"和"退格"键)  .esc  .s

  • 对vue 键盘回车事件的实例讲解

    如果是原生的input,使用 @keyup.enter就可以,若是使用了element-ui,则要加上native限制符,因为element-ui把input进行了封装,原事件就不起作用了,代码如下: <input v-model="form.name" placeholder="昵称" @keyup.enter="submit"> <el-input v-model="form.name" placehol

  • 详解Vue的键盘事件

    目录 常用按键别名 未提供别名的键 系统修饰键 自定义按键别名 总结 在js中我们要获取一个按键的编码通常需要通过(keydown/keyup)去绑定一个事件,再通过默认参数event中的keyCode属性去取得编码.如果我们要实现按固定的键才能触发事件时就需要在事件中进行不断的判断,这样会显的很麻烦,如 var input = document.querySelector('input') input.onkeyup = function (e) { if (e.keyCode == 13)

  • 详解vue中v-on事件监听指令的基本用法

    一.本节说明 我们在开发过程中经常需要监听用户的输入,比如:用户的点击事件.拖拽事件.键盘事件等等.这就需要用到我们下面要学习的内容v-on指令. 我们通过一个简单的计数器的例子,来讲解v-on指令的使用. 二. 怎么做 定义数据counter,用于表示计数器数字,初始值设置为0 v-on:click 表示当发生点击事件的时候,触发等号里面的表达式或者函数 表达式counter++和counter--分别实现计数器数值的加1和减1操作 语法糖:我们可以将v-on:click简写为@click 三

  • 详解pygame捕获键盘事件的两种方式

    方式1:在pygame中使用pygame.event.get()方法捕获键盘事件,使用这个方式捕获的键盘事件必须要是按下再弹起才算一次. 示例示例: for event in pygame.event.get(): # 捕获键盘事件 if event.type == pygame.QUIT: # 判断按键类型 print("按下了退出按键") 方式2:在pygame中可以使用pygame.key.get_pressed()来返回所有按键元组,通过判断键盘常量,可以在元组中判断出那个键被

  • 详解Vue方法与事件

    一 vue方法实现 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue方法与事件</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-s

  • 详解Vue 方法与事件处理器

    方法与事件处理器 方法处理器 可以用 v-on 指令监听 DOM 事件: <div id="example"> <button v-on:click="greet">Greet</button> </div> 我们绑定了一个单击事件处理器到一个方法 greet.下面在 Vue 实例中定义这个方法: var vm = new Vue({ el: '#example', data: { name: 'Vue.js' },

  • 详解vue.js的事件处理器v-on:click

    详解vue.js的事件处理器v-on:click

    用 v-on 指令监听 DOM 事件 注意:HTML5中不能使用v-on,换为@ (1)html代码: <div id="example"> <button v-on:click="greet">Greet</button> // 或者 <button @click="greet">Greet</button> </div> (2)js代码: var vm = new Vue

  • 详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法

    最近在项目中实现在循环出来的图片中当鼠标移入隐藏当前图片显示另一张图片的需求时碰到了一个小问题.就是当使用@mouseenter 和@mouseleave事件来实现这个需求时却发现鼠标移入后图片出现闪烁现象. 重点:事件写到父元素上才行!!! 0.0 下面写下我的实现方法和实现效果 样式代码: <div class="imgs" v-for="(item,index) in exampleUrl" :key = index @mouseenter ="

  • 详解vue中在父组件点击按钮触发子组件的事件

    我把这个实例分为几个步骤解读: 1.父组件的button元素绑定click事件,该事件指向notify方法 2.给子组件注册一个ref="child" 3.父组件的notify的方法在处理时,使用了$refs.child把事件传递给子组件的parentMsg方法,同时携带着父组件中的参数msg  4.子组件接收到父组件的事件后,调用了parentMsg方法,把接收到的msg放到message数组中 父组件 <template> <div id="app&qu

  • 详解Vue之事件处理

    在Vue进行前端开发中,事件监听是必不可少的功能,本文通过简单的小例子,简述v-on的简单用法,仅供学习分享使用,如有不足之处,还请指正. 监听事件 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码.如下所示: <button v-on:click="counter += 1">Add 1</button> <p>按钮被点击了 {{ counter }} 次.</p> 其中counter为Vue自定

  • 详解vue的数据binding绑定原理

    详解vue的数据binding绑定原理

    自从angular火了以后,各种mvc框架喷涌而出,angular虽然比较火,但是他的坑还是蛮多的,还有许多性能问题被人们吐槽.比如坑爹的脏检查机制,数据binding是受人喜爱的,脏检查就有点-性能低下了.有时候改了一个地方,脏循环要循环多次来保证数据是不是真的变了和是否停止变化了.这样性能就很低了.于是人们开始钻研新的双向数据binding的方法.尤大的vue binding就是本人蛮喜欢的一种实现方式,本文跟随尤大的一个例子来详解vue的数据binding的原理. 数据binding,一般

随机推荐