Angular富文本搜索高亮实现：输入框焦点丢失问题求助

核心问题原因 #

你遇到的输入框失焦，确实是因为高亮指令里的Selection.collapse()会将全局选区重置到文档开头，直接抢走了搜索输入框的焦点。

具体解决方案 #

1. 保存并恢复输入框焦点

在执行高亮逻辑的前后，手动记录当前聚焦的元素，操作完成后强制恢复焦点，甚至可以保留光标位置：

// 在高亮逻辑执行前，记录当前激活元素
const activeEl = document.activeElement;

// 执行你的高亮处理逻辑（包括原有的节点拆分、包裹highlight span等操作）
this.processHighlight();

// 恢复输入框焦点
if (activeEl instanceof HTMLElement) {
  activeEl.focus();
  // 如果是输入框，还可以恢复光标位置，提升体验
  if ('selectionStart' in activeEl) {
    const input = activeEl as HTMLInputElement;
    const cursorPos = input.selectionStart;
    input.setSelectionRange(cursorPos, cursorPos);
  }
}

2. 移除不必要的全局选区操作

检查你的高亮实现代码，Selection.collapse()是否是必须的？如果只是为了完成文本节点的拆分或包裹操作，完全可以改用局部Range对象来处理，避免触碰全局Selection：

// 示例：用Range操作目标文本节点，而非全局Selection
const range = document.createRange();
range.setStart(targetTextNode, startOffset);
range.setEnd(targetTextNode, endOffset);
// 执行节点替换/包裹操作
const highlightSpan = document.createElement('span');
highlightSpan.className = 'highlight';
range.surroundContents(highlightSpan);
// 不需要调用Selection.collapse()

3. 优化DOM更新时机

在Angular环境下，确保高亮逻辑在合适的生命周期钩子中执行（比如ngAfterViewChecked），并且使用ChangeDetectorRef手动触发变更检测，避免因为DOM频繁更新导致的焦点异常：

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

@Directive({ selector: '[appHighlight]' })
export class HighlightDirective {
  constructor(private el: ElementRef, private cdr: ChangeDetectorRef) {}

  updateHighlight(searchTerm: string) {
    // 保存焦点
    const activeEl = document.activeElement;
    // 执行高亮操作
    this.applyHighlight(searchTerm);
    // 手动触发变更检测
    this.cdr.detectChanges();
    // 恢复焦点
    if (activeEl instanceof HTMLElement) activeEl.focus();
  }
}

额外注意事项 #

• 避免在每次输入字符时都完全重新渲染所有高亮节点，可以做增量更新（比如只修改新增/删除字符对应的高亮范围），减少DOM操作的影响
• 如果CKEditor的内容是动态加载的，确保高亮逻辑在内容渲染完成后再执行

内容的提问来源于stack exchange，提问作者Daniel López Ruano