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

Question

这是一个复杂的!我在Chrome中使用contentEditable,我遇到了头部融化问题.当我按下返回键时,Chrome会在innerHTML中插入一个新的div.这很好,很花哨.问题是在div的textContent中找不到换行符.我真的需要找到一种方法来将换行符添加到textContent中,与innerHTML中的div break相同.

有任何想法吗？

更新:

我可以使用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>

Answer 1

这是因为textContent不了解风格.结果,例如,它显示隐藏的内容.

更改c1.textContent为c1.innerText,它将显示换行符.

Answer 2

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

在页面加载时，我使用textContent它保持换行符完整。当用户开始打字时，我使用innerTextwhich 识别插入的分页符。一个简单的 if 语句就可以解决问题！