Angular中TextArea光标位置插入文本时元素未被识别为TextArea解决咨询

document.querySelector 方法默认返回的是通用Element类型，TypeScript无法识别它是<textarea>元素，而setRangeText、selectionStart、selectionEnd都是HTMLTextAreaElement专属的属性/方法，因此触发类型报错。
另外你要实现失焦后仍然插入到上次光标位置，还需要额外存储光标位置，因为textarea失焦后自带的selectionStart和selectionEnd会被重置为null。

推荐使用Angular原生的@ViewChild获取元素实例，更符合框架规范，同时新增光标位置存储逻辑：

1. 调整HTML模板 #

给textarea新增模板引用变量和光标位置监听事件：

<button mat-icon-button type="button" (click)="onInsertSomethingText(entry)" >
  <mat-icon>play_for_work</mat-icon>
</button>
<div>
  <mat-form-field>
    <textarea
      #bodyTextarea
      matInput
      rows="5"
      formControlName="body"
      (click)="saveCaretPosition()"
      (keyup)="saveCaretPosition()"
      (focusout)="saveCaretPosition()"
    ></textarea>
  </mat-form-field>
</div>

2. 调整TS逻辑 #

import { ViewChild, ElementRef } from '@angular/core';
// 其他原有导入保持不变

// 存储上次光标位置
private lastCaretStart = 0;
private lastCaretEnd = 0;
// 通过模板引用变量直接获取textarea实例，自动带正确类型
@ViewChild('bodyTextarea') private bodyTextarea!: ElementRef<HTMLTextAreaElement>;

private buildMyFormGroup() {
  return this.formBuilder.group({
    body: ['', [Validators.required, Validators.minLength(1)]],
  });
}

// 保存当前光标位置
public saveCaretPosition() {
  const textarea = this.bodyTextarea.nativeElement;
  this.lastCaretStart = textarea.selectionStart ?? 0;
  this.lastCaretEnd = textarea.selectionEnd ?? 0;
}

// 插入文本方法
public onInsertSomethingText(myText: string) {
  const textarea = this.bodyTextarea.nativeElement;
  // 用存储的光标位置插入文本
  textarea.setRangeText(myText, this.lastCaretStart, this.lastCaretEnd, 'end');
  // 同步更新表单控件值，避免表单校验和取值异常
  this.buildMyFormGroup().get('body')?.setValue(textarea.value);
  // 更新插入后的光标位置
  this.saveCaretPosition();
}

兼容原有querySelector写法 #

如果你不想改模板引用的写法，只需要给querySelector的结果加类型断言即可：

// 注意id选择器要加#前缀
const myTA = document.querySelector(`#${this.BODY_TEXTAREA}`) as HTMLTextAreaElement;

之后就可以正常调用setRangeText等方法了，不过仍然需要补充光标位置存储逻辑才能实现失焦后插入的需求。

内容的提问来源于stack exchange，提问作者user5113188