点击鼠标后出现的选定文本消失

Question

我已经在我的Angular应用程序中编写了代码，将用户选择/突出显示的文本片段放入文本区域:

<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;
}

这个作品;这意味着我选择的文本出现在文本框中，但一旦我单击该框(或单击页面上的任何地方)，文本就会消失。

我做错了什么，转移的文本不留在那里?

Answer 1

您实际期望的是什么-当您单击(使'mousedown'/'mouseup')时，val被重新评估…

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