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来保持换行符不变。当用户开始输入时，我使用innerText识别插入的分页符。一个简单的if语句可以解决这个问题！

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

2 个答案: