Question

我正在尝试在内容可编辑的div上读取多行用户输入，但是当我用contentEditableDiv.innerText读取输入时，没有得到正确的换行数。

我尝试了textContent，但是它没有返回任何换行符，而innerText有时返回了太多。 innerHTML似乎不合适，因为我不需要任何HTML代码，而只需要文本。

如果我的div包含：

a
b

它返回“a↵b”（在示例中为97 10 98）

但是如果我的<div>包含：

a

b

innerText返回a↵↵↵b（示例中，↵太多，97 10 10 10 98）

var input = document.getElementById("input");
var button = document.getElementById("button");
var result = document.getElementById("result");
button.addEventListener("click", (event) => {
  var charCodes = "";
  for (var i = 0; i < input.innerText.length; ++i) {
    charCodes += input.innerText.charCodeAt(i) + " ";
  }
  result.innerText = charCodes;
});

<div id="input" contenteditable="true" spellcheck="true" style="border:1px #000 solid"></div>
<button id="button">check</button>
<div id="result"></div>

Answer 1

The standard有点模糊：

UA应该为用户提供一种在不插入段落的情况下在插入符位置请求显式换行的方式，例如作为其标识符为“ Enter”键且设置了shift修饰符的keydown事件的默认操作。行分隔符通常在诗句或地址中找到。 要插入换行符，用户代理必须插入br元素。

如果插入符位于不允许短语内容的地方（例如在空ol元素中），则用户代理不得直接在以下位置插入br元素插入位置。在这种情况下，行为取决于UA，但是用户代理不得响应于插入行分隔符的请求而生成与请求之前的DOM不一致的DOM。

要遵循此定义，可以将<br>元素包装到<div>中，Chrome可以做到这一点，但是它是UA依赖的，因此您不应依赖于此。这种行为和问题原因的副作用是div和br元素都会在innerText属性中产生换行符。

innerHTML中的a↵↵b在Chrome中如下所示：

a
<div>
  <br>
  <div>
    <br>
    <div>
      b
    </div>
  </div>
</div>

但是，如果粘贴它（而不是按char键入char），它看起来像这样

<div>a</div>
<div>
  <br>
</div>
<div>
  <br>
</div>
<div>b</div>

要减少换行符，您需要进一步处理innerHTML并处理每次输入更改后，<div><br></div>都作为一个单独的换行符，然后阅读innerText（在不允许使用诸如br之类的措辞的地方要格外小心，但在现实生活中，浏览器可以处理它们好）。

内容上的innerText可编辑，使某些换行符加倍

1 个答案: