html - 如何在 Angular 4 的 contenteditable div 中设置插入符号位置？

Question

<div id="editable" contenteditable="true" class="search-input" [textContent]="query" (input)="query=$event.target.textContent" (keyup)="searchClient($event)" (focus)="open()"></div>

这是我的 HTML 代码，将支持内容可编辑的 DIV 放入。当我按下任意键时，将触发 searchClient($event) 方法并设置一些值。我需要设置值的插入符(光标)端并聚焦它。

我尝试了几个例子，但我无法找出 Angular 4 的解决方案。

注意:我试过How to set caret(cursor) position in contenteditable element (div)?得到这个错误 SearchComponent.html:6 ERROR TypeError: Failed to execute 'setStart on 'Range': parameter 1 is not of type 'Node'.

Answer 1

如果您使用 Renderer2 API，您可以处理这个问题。

1º) 创建一个你想要关注的标签的变量，并创建一个事件来调用一个函数来改变光标位置。喜欢:

<div class="example" #tagDiv>
     I want to focus in here.
</div>
<button (onclick)="changeCursorLocation()"> Click here </button>

2º) 在组件中创建一个 ViewChild() 和函数:

  @ViewChild("tagDiv") tagDivField: ElementRef;
  changeCursorLocation(){
      const element = this.renderer.selectRootElement('#tagDiv', true);
      element.focus();
  }

渲染器 2:(https://angular.io/api/core/Renderer2)

我没有运行这个特定的和平代码，但我过去做过类似的事情并且效果很好。所以，我希望它能对您有所帮助。

观察:记得导入Renderer2和ElementRef；