我已经将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);
}