zoukankan      html  css  js  c++  java
  • 通过ev获取当前input名称,用于判断属于哪列(键盘事件)给一行三个input框添加上下左右键盘事件

    //键盘事件
    <Input v-model="trItem[tdItem.key]" @keyup.native="show($event,row,index)" />
    </span>

    show (item,row,index){  

      //通过event获取当前input的class名称(点击任意键盘触发)

      //let className = item.target.offsetParent.className;
     
     
     
      
    let newIndex;
    // 通过ev获取当前input名称,用于判断属于 table数据的哪列  index第几行
    let className = item.target.offsetParent.className;
    console.log(item, index);
    console.log("className:"+className)
    // 每一列 normal_1 normal_2 normal_3 三个input框的class名 用来判断在焦点在哪个input框上,用于后期键盘上下左右功能自己聚焦到某个input框
    if (className.indexOf('normal_1') !== -1) {
    this.data = index;
    this.didata = index*3;
    newIndex = index*3;
    } else if (className.indexOf('normal_2') !== -1) {
    this.data = index;
    this.didata = index*3 + 1;
    newIndex = index*3 + 1;
    } else if (className.indexOf('normal_3') !== -1) {
    this.data = index;
    this.didata = index*3 + 2;
    newIndex = index*3 + 2;
    }
    // 获取所有input
    let inputAll = document.querySelectorAll('.table_input input');
    this.iddata = inputAll;
    // 向上 =38
    if (item.keyCode === 38) {
    newIndex -= 3;
    if (inputAll[newIndex]) {
    inputAll[newIndex].focus();
    }
    }
    // 向下 =40
    if (item.keyCode === 40) {
    newIndex += 3;
    if (inputAll[newIndex]) {
    inputAll[newIndex].focus();
    }
    }
    // 向左
    if (item.keyCode === 37) {
    newIndex -= 1;
    if (inputAll[newIndex]) {
    inputAll[newIndex].focus();
    }
    }
    // 向右
    if (item.keyCode === 39) {
    newIndex += 1;
    if (inputAll[newIndex]) {
    inputAll[newIndex].focus();
    }
    }

    }

  • 相关阅读:
    sql 删除默认索引,对象 依赖于 列,由于一个或多个对象访问此列
    sql 重复数据查询
    Sql 查询结果 根据某个字段值 变更另外一个字段值 case when
    使用ABP框架踩过的坑系列3
    使用ABP框架踩过的坑系列5
    使用ABP框架踩过的坑系列4
    使用ABP框架踩过的坑系列2
    使用ABP框架踩过的坑系列1
    java rest框架jersey数组单记录问题解决
    测试工程师面试常见逻辑题
  • 原文地址:https://www.cnblogs.com/wssdx/p/11120336.html
Copyright © 2011-2022 走看看