仅向 textContent 或 innerText 添加换行符 - 在 Chrome 中答案

【问题标题】：Add linebreak to textContent or innerText only - in Chrome仅向 textContent 或 innerText 添加换行符 - 在 Chrome 中
【发布时间】：2012-03-08 23:53:50
【问题描述】：

这是一个复杂的！我在 Chrome 中使用 contentEditable，我遇到了头部融化的问题。当我按下返回键时，Chrome 会在 innerHTML 中插入一个新的 div。这很好，花花公子。问题是在 div 的 textContent 中找不到换行符。我真的需要想办法将换行符添加到 textContent 与 innerHTML 中的 div 换行符相同的位置。

有什么想法吗？

更新：

我可以使用innerText，但是当页面加载时出现的换行符会被忽略。我需要这些方法之一的一致性。换句话说，我需要 textContent 来显示新输入的换行符或 innerText 来显示页面加载时存在的换行符。

这是一个更新的演示：

function checkit() {
  var c1 = document.getElementById('c1')
  alert("TEXTCONTENT:\n" + c1.textContent + "\n\nINNERTEXT:\n" + c1.innerText + "\n\nINNERHTML:\n" + c1.innerHTML)
}

div {padding: 20px; border-bottom: 1px solid #CCC;}

<div><a href="#" onclick="checkit()">check it</a></div>

<div contentEditable="true" id="c1">click inside this <b>div</b>,
press return and then press <b>check it</b> above</div>

【问题讨论】：

How can I insert new line/carriage returns into an element.textContent?的可能重复

标签： javascript html wysiwyg contenteditable

【解决方案1】：

这是因为textContent 不了解样式。因此，例如，它会显示隐藏的内容。

把c1.textContent改成c1.innerText会显示换行符。

【讨论】：

谢谢丹尼斯，但现在我遇到了相反的问题，内容中已经存在的换行符被忽略了。有什么方法可以在这里获得一致性吗？（见上面的更新）
这就是它应该的工作方式。不会显示 HTML 页面中的换行符。请改用<br />。

【解决方案2】：

我已经通过为每种情况加载不同的变量来解决这个问题：

在页面加载时，我使用textContent 保持换行符不变。当用户开始输入时，我使用innerText 来识别插入的分页符。一个简单的 if 语句就可以解决问题！

【讨论】：