当使用角度js调用contenteditable div上的change事件时，Cursor（插入符号）移动到开头

Question

当触发change事件时，光标移动到开头而不是设置为最后一个类型位置。我正在使用内容可编辑的div使用angular js。

plunker

http://plnkr.co/edit/FFaWNZmgk00Etubtjgg8?p=preview

为什么光标位置移动到开头？

Answer 1

我知道这是一个老问题，但是，由于我一直在寻找解决这个问题的整个工作日，我想将这个解决方案分享给那些可能仍在寻找工作回答：

var el, el2, range, sel;

el = element[0];
range = document.createRange();
sel = window.getSelection();
if (el.childNodes.length > 0) {
el2 = el.childNodes[el.childNodes.length - 1];
range.setStartAfter(el2);
} else {
range.setStartAfter(el);
}
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);

我的代码最初来自akatov/angular-contenteditable指令，＆＃34; moveCaretToEndOnChange＆＃34;方法。 这对我有用。

Answer 2

我认为Angular会重写可编辑元素的innerHTML属性，从而销毁并重新创建其中的所有DOM树，这会导致插入符号重置为开头。有关可能的解决方案，请参阅以下答案：

• https://stackoverflow.com/a/13950376/96100
• https://stackoverflow.com/a/8240055/96100

Answer 3

就我而言，我使用与DOM（双向绑定）相同的array引用来更改innerHTML。因此，dom会重新渲染，因此光标移至开头。

解决方案是使用JSON.parse（JSON.stringify（a））;复制数组的深层副本。其中a是存储内容可编辑的单词然后进行更改的数组
let filetexts =JSON.parse(JSON.stringify(this.filetexts)); // updating the current text filetexts[alternativesIndex].Alternatives[0].Words[wordIndex].Word = html; let data = { Text: JSON.stringify(filetexts) }; this.fileService.changeFileText(data, this.file.fileId).subscribe(res => { });