首页 > 解决方案 > 在 Angular 中的 TextArea 内的当前(或最后一个)插入符号位置插入文本;元素不被解释为 TextArea

问题描述

我正在检查此文档...

https://material.angular.io/cdk/clipboard/examples

TextArea是否有一些示例解释如何在(失去焦点事件之后)内部的最后一个当前(可能是开始或中间)位置的某些文本中粘贴。

我正在尝试这个简单的响应: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)

适应我的代码:

在 .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>

在我的 .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');
  }
 

在这一行中myTA.setRangeText(myText, myTA.selectionStart, myTA.selectionEnd, 'end');,我得到了这些:

我知道这可能myTA不会被解释为真实的TextArea

如何正确执行?

提前致谢

标签: angulartextareacopy-paste

解决方案


当你处理 Angular 时,你就身处 TypeScript 世界。

document.querySelector方法是一个通用方法,默认情况下它返回Element

querySelector<E extends Element = Element>(selectors: string): E | null;

只需选择正确的类型,您就完成了:

const myTA = document.querySelector<HTMLTextAreaElement>(`#${this.BODY_TEXTAREA}`);
                                    ^^^^^^^^^^^^^^^^^^^          

推荐阅读