Contenteditable DIV is not working properly with a

问题:

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"

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

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

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!

回答1:

(input)

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.

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"

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

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);
  }

Check the example here: https://stackblitz.com/edit/input-event