在 Angular 中的 TextArea 内的当前（或最后一个）插入符号位置插入文本；元素不被解释为 TextArea

Posted 2023-05-07

【中文标题】在 Angular 中的 TextArea 内的当前（或最后一个）插入符号位置插入文本；元素不被解释为 TextArea

【英文标题】：inserting text in current (or last) caret position inside of TextArea, in Angular; Element is not interpreted as TextArea

【发布时间】：2021-12-07 08:20:40

【问题描述】：

我正在查看此文档...

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

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

我正在尝试这个简单的回复：https://***.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'); 我得到了这些：

“元素”类型上不存在属性“setRangeText”.ts(2339) “元素”类型上不存在属性“selectionStart”.ts(2339) “元素”类型上不存在属性“selectionEnd”.ts(2339)

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

如何正确操作？

提前致谢

【问题讨论】：

您的 id 是 MY_TEXTAREA，您选择的是 BODY_TEXTAREA，这是问题中的拼写错误吗？

@OwenKelvin 谢谢，你没事！

【参考方案1】：

当您处理 Angular 时，您就进入了 TypeScript 世界。

document.querySelector 方法是一个泛型方法，默认返回Element：

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

只需选择正确的类型即可完成：

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

【讨论】：

谢谢，不幸的是我在 myTA 变量中得到了 null 然后我无法测试它。我知道这是问题的变化。我很抱歉，:(

@Anita 你能准备一个 stackblitz 示例以便我帮忙吗？

当然！这是我的尝试stackblitz.com/edit/angular-ivy-eenyyo

由于您是按 id 选择的，因此您应该在选择器 document.querySelector('#$this.BODY_TEXTAREA') stackblitz.com/edit/… 之前添加 #

单引号不起作用我需要使用反引号！