代码之家 › 专栏 › 技术社区 › Always_a_learner

contentEditable div在firefox中无法正确处理角度双向绑定

contenteditable angular

2

Always_a_learner · 技术社区 · 7 年前

我已经将div contentEditable div设置为可编辑div,它还可以在keyup上打开ngx弹出窗口,并根据 搜索文本 因此,我需要双向绑定和内容可编辑进一步我需要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中向后键入。

我从下面引用了 Plunker 在火狐中也不能正常工作。
同样发生在 SO Answer 和 Plunker

我不知道是什么 (input)="searchText=$event.target.textContent" 代码确实如此。但它绑定了searchText和div值。因此,这是必要的,但也造成了问题。如有可能,请解释上述代码的含义。谢谢!

1 回复 | 直到 7 年前

1

Chellappan à®µ 7 年前

(输入)

当input或textArea元素中有内容时激发input事件有变化,当元素发生变化时也会触发具有contentEditable属性。

因为contentEditable元素没有change事件输入要检查更改事件,Mozilla在插入符号位置错误方面有一些错误。

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

如果您从div中删除这一行,它将在mozilla中正常工作!

而且您不需要这个来获取(input)=“searchText=$event.target.textcontent”div值,您只需使用viewchild decorator来获取div的值

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

请检查以下示例: https://stackblitz.com/edit/input-event