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

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

contenteditable angular

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 回复 | 直到 6 年前

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

推荐文章

giorgio79 · 如何关注设置为自动高度和溢出的contenteditable div中的元素?

7 年前

devamat · 内容可编辑IE11文档。execCommand foreColor问题(在Firefox上正常工作)

7 年前

Shabin Muhammed · 内容可编辑Div,附加HTML导致问题。通过编程附加HTML后键入的每个文本都会添加到最后一个HTML标记中

7 年前

mtv · 未在ie11中选择radeditor内容可编辑锚标记

7 年前

alexis · 为什么contenteditable不起作用?[已关闭]

8 年前

Praveen · 使某些关键字在内容可编辑div[closed]中不可编辑

9 年前

Paul Draper · 粘贴的HTML是否保证被清除?

10 年前

simonzack · 允许contenteditable在dom修改后撤消

10 年前

JaviZu · 一些带占位符的div

10 年前

jsookiki · 获取div中文本的实际高度

10 年前