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())获得

    vi设计http://www.maiqicn.com 办公资源网站大全https://www.wode007.com

  • 相关阅读:
    文件处理
    字符编码的了解以及简单的文件处理
    python list去重加set排序
    数据的类型以及内置方法
    Python 入门 Day5
    Python 入门 Day3
    Python的入门
    计算机硬件
    【0903 | Day 29】反射和内置方法
    【0902 | Day 28】绑定方法和非绑定方法
  • 原文地址:https://www.cnblogs.com/xiaonian8/p/13714265.html
Copyright © 2011-2022 走看看