如何确保我的 div 中的最后一个标签始终是 <br />？ IE11 中的插入符号问题（错误？）

Question

我有一个 contentEditable div 可以包含多个 span 和 br 标签。

所需的功能：当用户按下 return 时，将添加一个新行并且插入符号正确放置在新行中，如第一个屏幕截图所示：

我面临的问题：如果最后一个标签不是 br（查看第一个屏幕截图中最后一个 br 标签），当用户按 return 添加新行光标由于某种原因放错了位置（第一行和第二行之间的某处，请参见第二个屏幕截图）。再次点击 return 并删除之前的新行或开始输入后，插入符号最终被正确放置。目前最后一个 br 标签只有在用户选择所有文本 (ctrl + a) 并删除所有内容时才会丢失。

为了避免出现问题，我只是在 div 的末尾附加了一个 br 标签（除非已经有一个）。否则我很乐意尝试任何其他解决方案。我该如何解决这个问题？

我试过的东西:

var brTag = document.createElement("br");

if (textBox.lastChild != brTag) {
    $(textBox).append("<br />");
}

和...

if (textBox.lastChild != "<br></br>") {
    $(textBox).append("<br />");
}

都没用！

Answer 1

第一次尝试无效，因为 "<br></br>" 是最后一个 child 的字符串表示形式，但它实际上是一个复杂的 object，不等同于字符串。

第二次尝试失败，因为您正在与新创建的元素进行比较，该元素不等于任何其他元素。

你想要的是比较你lastChild的tagName属性。试试看：

if (textBox.lastChild.tagName != 'BR') {
    $(textBox).append("<br />");
}

如何确保我的 div 中的最后一个标签始终是 <br />？ IE11 中的插入符号问题（错误？）

how can I make sure that the last tag in my div is always a <br />? caret issue (bug?) in IE11

html

javascript

jquery

caret

contenteditable