zoukankan      html  css  js  c++  java
  • vue 键盘操作事件

    需求:当按键盘enter键和键盘左右键时,左右切换页面卡片并读取卡片上的信息

    一、获取键盘对应的keycode

    keyCode 实际键值
    48到57 0到9
    65到90 a到z(A到Z)
    112到135 F1到F24
    8 BackSpace(退格)
    9 Tab
    13 Enter(回车)
    20 Caps_Lock(大写锁定)
    32 Space(空格键)
    37 Left(左箭头)
    38 Up(上箭头)
    39 Right(右箭头)
    40 Down(下箭头)

    二、绑定键盘事件方法

    属性描述
    onkeydown script 当按下按键时运行脚本
    onkeypress script 当按下并松开按键时运行脚本
    onkeyup script 当松开按键时运行脚本

    这里绑定keyup方法,@keyup.native

    <el-input-number
         v-model="item.dose"
         size="mini"
        :min="1"
        :max="9999"
        ref="inputNum"
        @keyup.native="handlerKeyChange($event,index)"
        controls-position="right"
     >
     </el-input-number>
    // 绑定并添加对应方法
    handlerKeyChange($ev){
    if($ev.keyCode === 13 || $ev.keyCode === 39){ console.log('跳到下一个') } if($ev.keyCode === 37){ console.log('跳到上一个') } ... }

    注意:

    1、Internet Explorer/Chrome 浏览器使用 event.keyCode 取回被按下的字符,而 Netscape/Firefox/Opera 等浏览器使用 event.which

    2、 获得 Unicode 编码值之后,如果需要得到实际对应的按键值,可以通过 Srting 对象的 fromCharCode 方法(String.fromCharCode())获得

  • 相关阅读:
    61. Rotate List
    60. Permutation Sequence
    59. Spiral Matrix II
    57. Insert Interval
    18多校8th
    2019山东省赛总结
    二分图——poj2239
    二分图匹配——poj1469
    二分图——poj2446匈牙利算法
    思维构造,建图——cf1159E
  • 原文地址:https://www.cnblogs.com/layaling/p/13164209.html
Copyright © 2011-2022 走看看