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

Posted

技术标签:

【中文标题】如何在 Angular 4 的 contenteditable div 中设置插入符号位置?【英文标题】:How to set caret position in contenteditable div in Angular 4? 【发布时间】:2018-05-06 10:44:16 【问题描述】:
<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'.

【问题讨论】:

How to set caret(cursor) position in contenteditable element (div)?的可能重复 谢谢,我在发布之前也尝试了该示例。得到这个错误。 SearchComponent.html:6 错误类型错误:无法在“范围”上执行“setStart”:参数 1 不是“节点”类型。 【参考方案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)

我没有运行这种特定的代码和平,但我过去做过类似的事情并且效果很好。所以,希望对大家有所帮助。

Obs:记得导入 Renderer2 和 ElementRef;

【讨论】:

【参考方案2】:

你可以用这个来改变它...

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

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

【讨论】:

以上是关于如何在 Angular 4 的 contenteditable div 中设置插入符号位置?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Angular 2 中编译 ng-content 中的动态模板

如何检查 <ng-content> 是不是为空? (到目前为止在 Angular 2+ 中)

如何在 Angular 2 的同一个组件中使用多个 ng-content?

如何在angular2中设置Content-Type和Accept得到错误415 Unsupported Media Type

如何使用 Angular Material 让 mat-sidenav-content 占据 100% 的高度

Angular ng-content 正在丢失换行符。如何保持换行符完好无损?