如何在 Angular 2 中获取内容可编辑的“div”的插入符号位置？

Posted 2023-03-05

【中文标题】如何在 Angular 2 中获取内容可编辑的“div”的插入符号位置？

【英文标题】：How to get caret position for a contenteditable 'div' in Angular 2?

【发布时间】：2017-04-17 21:05:10

【问题描述】：

我有以下代码：

<div #test (click)="onClick(test)" contenteditable="true">
            This text can be edited by the user.
</div>

@ViewChild('test') el:ElementRef;

constructor(private elementRef: ElementRef) 

onClick(event) 
  console.log(this.el.nativeElement); 
  let cursor = this.el.nativeElement.selectionStart; //gives undefined

当用户点击文本时，如何获取 'div' 元素的光标位置？

【参考方案1】：

selectionStart 是 htmlInputElement 的属性。

<div #test (click)="onClick(test)" contenteditable="true">
            This text can be edited by the user.
</div>

to 

<input  #test (click)="onClick(test)"  
  value='This text can be edited by the user.' />

希望这会有所帮助！

【讨论】：

谢谢，但我确实需要使用 而不是 。我可以使用“window.getSelection()”获取范围，但我在某处读到在 Angular 2 中像这样操作 DOM 是不安全的。

@swapp1990，这并不完全是在操纵 - 你没有改变 DOM 中的任何东西，只是读取一个属性。尽管不鼓励，但如果您确实需要在 DOM 中测量某些内容，这是您唯一的选择。

这不是这个问题的答案，问题是问如何获取 contenteditable 的插入符号，而不是输入！