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

时间:2018-07-06 08:28:44

标签: angular contenteditable

我已将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 AnswerPlunker

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

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

在.html中:

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

在.ts中:

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