当某些输入在父元素内时访问 nextSibling

Question

我有一个 html table，其中一些 <input> 在一些 <td> 中。当当前输入的值不同于 "" 时，我想关注下一个输入。然而，这不起作用，因为输入元素并不直接相互跟随

let cells = document.querySelectorAll('td > input');

for (let x of cells) {
  x.maxLength = 1;
  x.type = 'text';
  x.onkeyup = function() {
    if (this.value != '') { this.nextSibling.focus() } //HERE
  }
}

<table>
  <tr>
    <td> <input> </td>
    <td> <input> </td>
    <td> <input> </td>
  </tr>
  <tr>
    <td> <input> </td>
    <td> <input> </td>
    <td> <input> </td>
  </tr>
  <tr>
    <td> <input> </td>
    <td> <input> </td>
    <td> <input> </td>
  </tr>
</table>

感谢您的帮助！

Answer 1

您可以只获取当前单元格的 index 并使用它来代替 nextSibling。

let cells = document.querySelectorAll('td > input');

for (let x of cells) {
  const index = [...cells].indexOf(x); // Get index of current cell
  
  x.maxLength = 1;
  x.type = 'text';
  x.onkeyup = function() {
    if (this.value != '' && cells[index + 1]) { // Check if the next cell exists
      cells[index + 1].focus(); // Focus next cell
    }
  }
}

<table>
  <tr>
    <td> <input> </td>
    <td> <input> </td>
    <td> <input> </td>
    <td> <input> </td>
    <td> <input> </td>
  </tr>
  <tr>
    <td> <input> </td>
    <td> <input> </td>
    <td> <input> </td>
    <td> <input> </td>
    <td> <input> </td>
  </tr>
  <tr>
    <td> <input> </td>
    <td> <input> </td>
    <td> <input> </td>
    <td> <input> </td>
    <td> <input> </td>
  </tr>
  <tr>
    <td> <input> </td>
    <td> <input> </td>
    <td> <input> </td>
    <td> <input> </td>
    <td> <input> </td>
  </tr>
</table>

当某些输入在父元素内时访问 nextSibling

Access nextSibling when some inputs are inside parent elements

javascript

focus

nextsibling