He escrito código en mi aplicación Angular para que el usuario seleccione/resalte el fragmento de texto en un área de texto:
<textarea name="highlightedText" id="selectedText" rows="3" class="form-control" placeholder="Your highlighted text will appear here..." [(ngModel)]="highlightedText" (mouseup)="mouseUp()"> </textarea>En mi componente, tengo:
// 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; }Esto funciona; lo que significa que el texto que selecciono aparece en el cuadro de texto, pero tan pronto como hago clic en ese cuadro (o en cualquier parte de la página), el texto desaparece.
¿Qué estoy haciendo mal para que el texto transferido no se quede ahí?
¿Qué esperabas en realidad? El valor se reevaluaba cuando hacías clic (haciendo 'mousedown' / 'mouseup')...
mouseUp() { if (window.getSelection) { this.reEval(); } return this.highlightedText; } reEval() { const val = window.getSelection()!.toString().trim(); if (!!val.length) this.highlightedText = val; }