Contenteditable DIV在Firefox中使用角向双向绑定不能正常工作

Posted 2021-05-03

我已经将div设为contenteditable 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>

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

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

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

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

我不确定(input)="searchText=$event.target.textContent"代码到底能做什么。但它绑定searchText和div值。因此，这是必需的，但也会引起问题。请尽可能解释以上代码的含义。谢谢！

答案

（（输入）

当输入或textarea元素中的某些内容被触发时，会触发输入事件有变化，并且元素发生变化时也会触发具有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