mouseup 后出现的选定文本随任何单击消失

Question

我已经在我的 Angular 应用程序中编写代码，将用户输入的文本片段 selected/highlighted 放入文本区域：

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

在我的组件中，我有：

// Content of user annotation
highlightedText: string = "";

constructor() {
    document.body.addEventListener("mouseup", () => {
      this.mouseUp();
    });
}

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

这行得通；意思是文本 I select 出现在文本框中，但只要我单击该文本框（或单击页面上的任意位置），文本就会消失。

传输的文本没有保留在那里，我做错了什么？

Answer 1

您实际期望的是什么 - 当您单击时重新评估 val（使 'mousedown' / 'mouseup'）...

  mouseUp() {
    if (window.getSelection) {
      this.reEval();
    }
    return this.highlightedText;
  }

  reEval() {
    const val = window.getSelection()!.toString().trim();
    if (!!val.length) this.highlightedText = val;
  }

mouseup 后出现的选定文本随任何单击消失

Selected text appearing after mouseup disappears with any click

html

javascript

mouseup

typescript

angular