Estaba revisando esta documentación...
https://material.angular.io/cdk/clipboard/examples
¿Hay algún ejemplo que explique cómo pegar dentro de algún texto de la última posición actual (tal vez inicial o media) dentro de TextArea (después del evento de foco perdido)?
Estaba intentando con esta simple respuesta: https://stackoverflow.com/a/58356806/5113188
function insertAtCaret(text) { const textarea = document.querySelector('textarea') textarea.setRangeText( text, textarea.selectionStart, textarea.selectionEnd, 'end' ) } setInterval(() => insertAtCaret('Hello'), 3000)Adaptándose a mi código:
En archivo .html:
<button mat-icon-button type="button" (click)="onInsertSomethingText(entry)" > <mat-icon>play_for_work</mat-icon> </button> <div> <mat-form-field> <textarea [id]="BODY_TEXTAREA" matInput rows="5" formControlName="body" ></textarea> </mat-form-field> </div>En mi archivo .ts
public readonly BODY_TEXTAREA = 'BODY_TEXTAREA'; private buildMyFormGroup() { return internalFormGroup = this.formBuilder.group({ body: ['', [Validators.required, Validators.minLength(1)]], }); } //Event in ordfer to insert the text in the position!!!! public onInsertSomethingText(myText: string) { console.log(myText); const myTA = document.querySelector(this.BODY_TEXTAREA); myTA.setRangeText(myText, myTA.selectionStart, myTA.selectionEnd, 'end'); } En esta línea myTA.setRangeText(myText, myTA.selectionStart, myTA.selectionEnd, 'end'); Estoy obteniendo estos:
Sé que posiblemente myTA no se interprete como un TextArea real
¿Cómo hacerlo correctamente?
Gracias de antemano
Cuando estás tratando con Angular, estás en el mundo de TypeScript.
El método document.querySelector es un método genérico en el que, de forma predeterminada, devuelve Element :
querySelector<E extends Element = Element>(selectors: string): E | null;Simplemente elija el tipo adecuado y listo:
const myTA = document.querySelector<HTMLTextAreaElement>(`#${this.BODY_TEXTAREA}`); ^^^^^^^^^^^^^^^^^^^