angularjs - 使用 Angular js 调用 contenteditable div 上的更改事件时，光标（插入符号）移至开头

Question

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

笨蛋

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指令“moveCaretToEndOnChange”方法获得了这段代码。这对我有用。

Answer 2

我会假设 Angular 正在重写innerHTML可编辑元素的属性，从而破坏并重新创建其中的所有 DOM 树，这导致插入符号重置为开始。请参阅这些答案以获取潜在的解决方案：

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

Answer 3

在我的情况下，我使用与在 DOM 上使用的相同的数组引用来更改 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 => { });