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

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

  •  2
  • Always_a_learner  · 技术社区  · 6 年前

    我已经将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 回复  |  直到 6 年前
        1
  •  1
  •   Chellappan வ    6 年前

    (输入)

    当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