通过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();
}
}

}

原文地址:https://www.cnblogs.com/wssdx/p/11120336.html