可编辑的DIV在Firefox中使用角度双向绑定不能正常工作 [英] Contenteditable DIV is not working properly with angular two way binding in firefox

问题描述

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

I have made my div contenteditable div and it also opens ngx-popover on keyup and populate search results into popover on basis of searchText so I need two way binding as well as content editable further I need div rather than input:

<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>

但是当我在下面的代码行中添加时:

But when I add below line of code:

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

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

It does not work correctly in firefox browser. It types backward in firefox when you place cursor at end.

我从下面引用了 SO答案和 柱塞

I took reference from below Plunker which is also not working correctly in firefox.
Also happens same for SO Answer and Plunker

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

I am not sure what (input)="searchText=$event.target.textContent" code exactly does. But it bind searchText and div value. So it is required but it is also causing issue. Please explain meaning of above code if possible. Thanks!

推荐答案

(输入)

当input或textarea元素中的某些内容触发输入事件 有变化，并且元素发生变化时也会触发 具有contenteditable属性.

Input event is fired when something in an input or textarea element has changes and it's also fired when something has changed in elements with contenteditable attribute.

由于contenteditable元素没有更改事件，因此使用了输入 检查更改事件，Mozilla的插入符号位置有误.

Since contenteditable elements doesn't have change event input is used to check the change event and Mozilla has some bug regarding the wrong caret position.

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

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

If you remove this line from your div it will work properly in Mozilla!

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

And you dont need this to get (input)="searchText=$event.target.textContent" the div value you can simply use ViewChild decorator to get the value of div

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

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

这篇关于可编辑的DIV在Firefox中使用角度双向绑定不能正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！