Angular 8可编辑表格光标定位与回车转Tab需求咨询

我之前做Angular可编辑表格时也碰到过一模一样的问题，给你分享两个经过实测的解决方案，完全适配Angular 8的场景：

contenteditable元素默认聚焦时光标在开头，我们可以通过原生的Range和Selection API来手动控制光标位置，结合Angular的事件监听或指令来实现复用。

方案一：组件内直接处理（快速实现） #

在你的表格组件里添加事件监听和工具方法：

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

@Component({
  selector: 'app-number-table',
  template: `
    <table>
      <tr>
        <td contenteditable (keydown.tab)="handleTab($event)">123</td>
        <td contenteditable (keydown.tab)="handleTab($event)">456</td>
      </tr>
      <tr>
        <td contenteditable (keydown.tab)="handleTab($event)">789</td>
        <td contenteditable (keydown.tab)="handleTab($event)">012</td>
      </tr>
    </table>
  `
})
export class NumberTableComponent {
  constructor(private el: ElementRef) {}

  handleTab(event: KeyboardEvent) {
    event.preventDefault(); // 阻止默认Tab跳转到其他元素的行为
    const currentCell = event.target as HTMLElement;
    const nextCell = this.findNextEditableCell(currentCell);
    
    if (nextCell) {
      nextCell.focus();
      // 二选一：要么光标移到末尾，要么全选内容
      this.moveCursorToEnd(nextCell);
      // this.selectAllCellContent(nextCell);
    }
  }

  // 处理跨行的情况：当前是行末则跳转到下一行首单元格
  private findNextEditableCell(current: HTMLElement): HTMLElement | null {
    // 先找当前行的下一个单元格
    const nextSibling = current.nextElementSibling;
    if (nextSibling && nextSibling.isContentEditable) {
      return nextSibling as HTMLElement;
    }
    // 找不到则找下一行的第一个可编辑单元格
    const currentRow = current.parentElement;
    if (!currentRow) return null;
    const nextRow = currentRow.nextElementSibling;
    return nextRow?.querySelector('[contenteditable="true"]') as HTMLElement || null;
  }

  // 光标定位到内容末尾
  private moveCursorToEnd(element: HTMLElement): void {
    const range = document.createRange();
    const selection = window.getSelection();
    range.selectNodeContents(element);
    range.collapse(false); // false表示折叠到内容末尾
    selection?.removeAllRanges();
    selection?.addRange(range);
  }

  // 全选单元格内容（类似Ctrl+A）
  private selectAllCellContent(element: HTMLElement): void {
    const range = document.createRange();
    const selection = window.getSelection();
    range.selectNodeContents(element);
    selection?.removeAllRanges();
    selection?.addRange(range);
  }
}

方案二：封装成指令（复用性更强） #

如果多个组件都需要这个功能，推荐封装成Angular指令：

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appEditableCell]'
})
export class EditableCellDirective {
  constructor(private el: ElementRef) {}

  @HostListener('focus')
  onFocus(): void {
    // 聚焦时自动把光标移到末尾，或者换成全选方法
    this.moveCursorToEnd(this.el.nativeElement);
  }

  @HostListener('keydown.tab', ['$event'])
  onTab(event: KeyboardEvent): void {
    event.preventDefault();
    const nextCell = this.findNextEditableCell(this.el.nativeElement);
    nextCell?.focus();
  }

  private moveCursorToEnd(element: HTMLElement): void {
    const range = document.createRange();
    const selection = window.getSelection();
    range.selectNodeContents(element);
    range.collapse(false);
    selection?.removeAllRanges();
    selection?.addRange(range);
  }

  private findNextEditableCell(current: HTMLElement): HTMLElement | null {
    // 同上面组件里的逻辑，处理跨行
    const nextSibling = current.nextElementSibling;
    if (nextSibling && nextSibling.isContentEditable) {
      return nextSibling as HTMLElement;
    }
    const currentRow = current.parentElement;
    if (!currentRow) return null;
    const nextRow = currentRow.nextElementSibling;
    return nextRow?.querySelector('[contenteditable="true"]') as HTMLElement || null;
  }
}

然后在模板里直接使用：

<td contenteditable appEditableCell>123</td>

只需要在上面的逻辑里添加Enter键的监听，复用Tab的处理逻辑即可。

比如在组件里添加：

@HostListener('keydown.enter', ['$event'])
handleEnter(event: KeyboardEvent) {
  event.preventDefault(); // 阻止默认换行行为
  this.handleTab(event); // 直接调用Tab的处理方法
}

如果是用指令，就添加：

@HostListener('keydown.enter', ['$event'])
onEnter(event: KeyboardEvent): void {
  event.preventDefault();
  const nextCell = this.findNextEditableCell(this.el.nativeElement);
  nextCell?.focus();
}

这样按下Enter时，就会和Tab一样切换到下一个单元格，同时保持光标定位的逻辑。

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