Question

我已将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值。因此，这是必需的，但也会引起问题。请尽可能解释以上代码的含义。谢谢！

Answer 1

（输入）

当输入或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

Answer 2

在.html中：

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

在.ts中：

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

可编辑的DIV在Firefox中使用角度双向绑定不能正常工作

2 个答案: