Angular中div元素(select)事件不生效的替代实现方案

原生select事件仅支持<input type="text">、<textarea>类表单元素，设置了contenteditable="true"的div元素无法触发该事件，可通过监听选择操作的结束事件，搭配原生Selection API实现选中文本获取。

核心逻辑是覆盖用户选中文本的两个触发场景：鼠标拖选后松开、按Shift+方向键选中文本后松开，对应绑定mouseup和keyup事件即可，同时增加边界判断避免拿到无效选中内容。

• 模板代码

<div 
  contenteditable="true" 
  #editor 
  id="editor"
  (mouseup)="getSelectedText()"
  (keyup)="getSelectedText()"
></div>

• 组件逻辑代码

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

@Component({
  // 组件元数据按自身业务配置即可
})
export class EditorComponent {
  @ViewChild('editor') editorRef!: ElementRef<HTMLDivElement>;

  getSelectedText(): void {
    const selection = window.getSelection();
    // 无有效选中范围、选中内容为空时直接返回
    if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
      return;
    }

    const selectRange = selection.getRangeAt(0);
    // 校验选中内容是否在当前编辑器内部，避免获取页面其他区域的选中内容
    if (!this.editorRef.nativeElement.contains(selectRange.commonAncestorContainer)) {
      return;
    }

    const selectedContent = selection.toString().trim();
    if (selectedContent) {
      console.log('当前选中文本：', selectedContent);
      // 后续业务逻辑写在这里即可
    }
  }
}

如果需要更实时的选中状态响应，可以监听document上的selectionchange事件，注意要在组件ngOnDestroy生命周期中解绑事件，避免内存泄漏。

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