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();
  }

Renderer2：（https://angular.io/api/core/Renderer2）

我没有运行这种特定的代码，但是过去我做过类似的事情，并且效果很好。因此，希望对您有所帮助。

obs：建议导入Renderer2和ElementRef；

Answer 2

您可以用它来更改它...

JMX

还可以找到有用的链接来深入研究此问题。
https://github.com/angular/angular/issues/9796

如何在Angular 4中的contenteditable div中设置插入位置？

2 个答案: