javascript - 如何确保我的 div 中的最后一个标记始终是 <br/>？ IE11 中的插入符号问题(错误？)

Question

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

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

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

为了避免出现问题，我只是在我的 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 的字符串表示，但它实际上是一个不等同于字符串的复杂对象。

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

你要的是比较tagName你的属性(property)lastChild . 试试看:

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