Angular应用：选中文本填充至文本框后点击页面任意位置即消失的问题求助

我来帮你梳理下问题的根源，以及对应的解决办法：

为什么文本会消失？ #

你给document.body绑定了全局的mouseup事件，每次页面上触发mouseup（包括点击文本框、空白区域这种没有选中文本的场景），都会执行mouseUp()方法。这时候window.getSelection()返回的是空字符串，直接赋值给highlightedText就会把之前的内容清空——这就是文本消失的核心原因！

另外，你的textarea上还绑定了(mouseup)="mouseUp()"，点击文本框本身也会触发这个方法，同样会导致内容被清空。

修复方案 #

方案1：只在选中文本时更新变量（最直接的修复） #

修改mouseUp()方法，增加判断逻辑，只有当选中的文本不为空时，才更新highlightedText：

mouseUp() {
  if (window.getSelection) {
    const selectedContent = window.getSelection()!.toString();
    // 仅当选中了有效内容时才更新变量，避免清空已有文本
    if (selectedContent.trim()) {
      this.highlightedText = selectedContent;
    }
  }
  return this.highlightedText;
}

方案2：优化事件绑定范围（避免全局事件的冗余触发） #

不需要给整个页面绑定mouseup事件，应该只在用户可能选中文本的目标区域（比如文章正文容器）绑定事件，这样点击textarea或空白处不会触发该方法，进一步避免意外清空：

首先在组件中注入ElementRef，然后绑定目标区域的事件：

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

@Component({
  // 你的组件元数据
})
export class YourComponent implements OnDestroy {
  highlightedText: string = "";
  private mouseUpListener: () => void;

  constructor(private elementRef: ElementRef) {
    // 假设你的可选中内容在id为"content-container"的元素内
    const contentContainer = this.elementRef.nativeElement.querySelector('#content-container');
    if (contentContainer) {
      this.mouseUpListener = () => this.mouseUp();
      contentContainer.addEventListener("mouseup", this.mouseUpListener);
    }
  }

  mouseUp() {
    if (window.getSelection) {
      const selectedContent = window.getSelection()!.toString();
      if (selectedContent.trim()) {
        this.highlightedText = selectedContent;
      }
    }
    return this.highlightedText;
  }

  // 组件销毁时移除事件监听，避免内存泄漏
  ngOnDestroy() {
    const contentContainer = this.elementRef.nativeElement.querySelector('#content-container');
    if (contentContainer && this.mouseUpListener) {
      contentContainer.removeEventListener("mouseup", this.mouseUpListener);
    }
  }
}

额外优化：移除textarea上的mouseup绑定 #

把textarea标签上的(mouseup)="mouseUp()"删掉，避免点击文本框时触发清空逻辑：

<textarea 
  name="highlightedText" 
  id="selectedText" 
  rows="3" 
  class="form-control" 
  placeholder="Your highlighted text will appear here..." 
  [(ngModel)]="highlightedText"
></textarea>

这样修改后，选中文本时会把内容同步到textarea，点击其他地方或文本框时，已有的内容就不会被清空了。

内容的提问来源于stack exchange，提问作者Reem Al-Assaf