Contenteditable DIV在firefox中无法与angular双向绑定正常工作

我已将我的div content设置为可编辑div，它还将在keyup上打开ngx popover，并根据searchText将搜索结果填充到popover中，因此我需要双向绑定以及可编辑的内容。我需要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>

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

我引用了下面的参考，它在firefox中也不能正常工作。 同样的情况也发生在 和

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

输入

当Input或textarea元素中存在某些内容时，将触发Input事件 当元素中的某些内容发生更改时，它也会被激发 具有contenteditable属性

因为contenteditable元素没有更改事件，所以使用了输入 为了检查更改事件，Mozilla出现了一些关于错误插入符号位置的错误

如果从div中删除这一行，它将在Mozilla中正常工作

您不需要这个来获取input=searchText=$event.target.textContent div值，您只需使用ViewChild decorator来获取div值

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

检查下面的示例：

In.html:

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

---

它工作得很好。谢谢。但我无法理解你所说的是什么意思，以及跟踪你当前的输入插入符号位置并一直将插入符号推到输入的开头。为什么这个问题只存在于Firefox中，而不存在于chrome中呢？我会在22小时后颁发奖金：不客气！。。。哪个是mozilla bug：在StackBlitz示例中，triggers=keyup click do是什么？@Dave这是我为ngx bootstrap popover实现的代码的一部分，当我在keyup上显示popover并单击此输入时，chellappan添加了它，因为它出现在我的代码中。

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

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

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