Contenteditable DIV 无法在 Firefox 中使用 Angular 双向绑定正常工作

Question

我已将我的 div 设为可内容编辑的 div，它还会在 keyup 上打开 ngx-popover，并根据 searchText 将搜索结果填充到弹出窗口中，因此我需要两种方式绑定以及可进一步编辑的内容div 而不是输入：

<span>
   <div id="contenteditablediv" contenteditable="true" (keyup)="triggerUserSearch()" type="text" [popover]="searchTemplate"
        placement="bottom"  triggers="keyup click" [textContent]="searchText" (input)="searchText=$event.target.textContent" [outsideClick]="true"
        containerClass="searchUsersPopup" placeholder="To" class="recipientInput searchTerm">{{searchText}}
   </div>
</span>

但是当我添加下面的代码行时：

(input)="searchText=$event.target.textContent"

它在 Firefox 浏览器中无法正常工作。当您将光标放在末尾时，它会在 Firefox 中向后键入。

我从下面的Plunker 中获取了参考，这在 Firefox 中也无法正常工作。
也发生同样的事情 SO Answer 和 Plunker

我不确定(input)="searchText=$event.target.textContent" 代码究竟做了什么。但它绑定了 searchText 和 div 值。 所以它是必需的，但它也引起了问题。 如果可能，请解释上述代码的含义。谢谢！

Answer 1

（输入）

当输入或文本区域元素中有内容时触发输入事件 有变化，当元素发生变化时它也会被触发 具有 contenteditable 属性。

由于 contenteditable 元素没有更改事件输入被使用 检查更改事件，Mozilla 有一些关于错误插入符号位置的错误。

(input)="searchText=$event.target.textContent"

如果您从 div 中删除此行，它将在 Mozilla 中正常工作！

而且你不需要这个来获取 (input)="searchText=$event.target.textContent" 的 div 值，你可以简单地使用 ViewChild 装饰器来获取 div 的值

@ViewChild('ref') ref:ElementRef; 
 triggerUserSearch(){
       console.log(this.ref.nativeElement.innerHTML);
  }

在此处查看示例：https://stackblitz.com/edit/input-event

Answer 2

在 .html 中：

<div (blur)="getContent($event.target.innerHTML)" contenteditable [innerHTML]="content"></div>

在 .ts 中：

getContent(innerText){
  this.content = innerText;
}