a-input实现enter切换焦点

其实就是用enter实现tab键的功能.客户不习惯使用tab切换焦点,用鼠标点又觉得麻烦,所以让我优化enter切换输入框的焦点.

网上好像没有a-input的实现方法,倒是有原生和el-input的.看了一会大致上知道了实现的方法,通过ref好像不太行,只能去操作dom.话不多说直接上图

结构和样式代码

我的结构比较简单,就是根据输入的数量去生成对应数量的input,

 <div class="card_wrap">
      <div class="c_item" v-for="item in tableData" :key="item.id">
        <a-input @pressEnter="pressEnter" @change="inpChange()" v-model:value="item.serial"></a-input>
      </div>
    </div>

.card_wrap {
  // 大盒子
  width: 98%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; // 替代原先的space-between布局方式
}

.c_item {
  // 每个item
  flex: 1;
  height: 30px;
  // border: 1px solid #ccc;
  width: calc((100% - 10px) / 10); // 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整
  min-width: calc((100% - 10px) / 10); // 加入这两个后每个item的宽度就生效了
  max-width: calc((100% - 10px) / 10); // 加入这两个后每个item的宽度就生效了

  &:nth-child(10n) {
    // 去除第3n个的margin-right
    margin-right: 0;
  }
}

这是对应的js和css

分析功能实现

主要还是使用ant提供的pressEnter方法,直接监听输入框的enter时间.

因为结构简单所以只需要通过perssEnter函数提供的e找到它的父元素的兄弟的子元素,触发这个子元素的focus方法就可以了

const pressEnter = (e) => {
  e.target.parentNode?.nextElementSibling?.firstChild ? e.target.parentNode.nextElementSibling.firstChild?.focus() : ''
}

你们根据自己的层级去找到对应的下一个input元素就好了