Angular 4实现按Enter键聚焦下一个输入框的问题求助

我之前也碰到过类似的问题，Angular和AngularJS、jQuery的DOM操作逻辑确实不一样，你之前的代码失效主要是因为拿到的element不一定是原生的HTML输入元素，或者在表格结构里nextElementSibling指向的不是下一个输入框（比如是<td>标签），导致调用focus()时报错。

下面给你两种可行的方案，你可以根据自己的表格结构选择：

方案一：直接操作DOM（适合简单表格结构） #

这种方法适合表格里每个输入框都在同级<td>里的情况，核心是找到下一个包含输入框的元素，再获取里面的input来调用focus()：

onKeyUp(event: KeyboardEvent) {
  // 用event.key代替keyCode，keyCode已经被废弃了
  if (event.key === 'Enter') {
    // 把事件目标转换成原生HTMLElement，确保有focus方法
    const currentInput = event.target as HTMLElement;
    // 先找当前输入框所在的td的下一个兄弟td
    let nextTd = currentInput.parentElement?.nextElementSibling as HTMLElement;

    // 循环查找下一个包含input的td
    while (nextTd) {
      const nextInput = nextTd.querySelector('input') as HTMLElement;
      if (nextInput) {
        nextInput.focus();
        // 阻止Enter的默认行为（比如表单提交、换行）
        event.preventDefault();
        return;
      }
      // 如果当前td里没有input，继续找下一个td
      nextTd = nextTd.nextElementSibling as HTMLElement;
    }

    // 可选：如果是最后一个输入框，跳转到下一行的第一个输入框
    const currentRow = currentInput.closest('tr') as HTMLElement;
    const nextRow = currentRow.nextElementSibling as HTMLElement;
    if (nextRow) {
      const firstInputOfNextRow = nextRow.querySelector('input') as HTMLElement;
      firstInputOfNextRow?.focus();
      event.preventDefault();
    }
  }
}

方案二：用Angular的ViewChildren（更符合Angular思想） #

这种方法不需要直接操作DOM，而是利用Angular的ViewChildren来获取所有输入框的引用，通过索引来切换焦点，更安全也更符合组件化的思路：

第一步：组件类里定义ViewChildren #

import { Component, ViewChildren, QueryList, ElementRef } from '@angular/core';

@Component({
  selector: 'app-table-component',
  templateUrl: './table.component.html'
})
export class TableComponent {
  // 用模板引用变量#inputs获取所有输入框
  @ViewChildren('inputs') inputs!: QueryList<ElementRef<HTMLInputElement>>;

  onInputKeyUp(event: KeyboardEvent, inputIndex: number) {
    if (event.key === 'Enter') {
      event.preventDefault();
      // 获取所有输入框的数组
      const inputArray = this.inputs.toArray();
      // 计算下一个输入框的索引
      const nextIndex = inputIndex + 1;
      // 如果存在下一个输入框，切换焦点
      if (nextIndex < inputArray.length) {
        inputArray[nextIndex].nativeElement.focus();
      } else {
        // 可选：回到第一个输入框
        // inputArray[0].nativeElement.focus();
      }
    }
  }
}

第二步：模板里给输入框加引用和事件绑定 #

<table>
  <tr *ngFor="let row of tableData; let rowIndex = index">
    <td>
      <input 
        #inputs 
        type="text" 
        (keyup)="onInputKeyUp($event, rowIndex * 2)"
      >
    </td>
    <td>
      <input 
        #inputs 
        type="text" 
        (keyup)="onInputKeyUp($event, rowIndex * 2 + 1)"
      >
    </td>
  </tr>
</table>

这里的inputIndex要根据你每行的输入框数量来计算，比如每行2个输入框，那第二行第一个的索引就是2*1=2，第二个是2*1+1=3，以此类推。

关键注意点 #

• 一定要用event.key === 'Enter'代替keyCode，因为keyCode是已废弃的API，现代浏览器更推荐使用event.key。
• 调用focus()前，必须确保拿到的是原生HTMLElement，所以要做类型转换（比如as HTMLElement）。
• 记得加event.preventDefault()，避免Enter键触发表单提交或者其他默认行为，影响用户体验。

内容的提问来源于stack exchange，提问作者Ekos