跨浏览器的内容可编辑div的innerText不一致

编程问答 2022-08-16

问题描述

我想要一个自动增长的文本区域。我正在探索contenteditable div方法。如果无法正常使用，我将使用JavaScript退回到textarea，但这是另一个故事。

这是没有希望吗？您有一些见识或技巧吗？

  • 运行代码片段，单击黄色div的中间部分，然后按Enter 1x。观察不同浏览器之间的innerText差异。
  • 在按Enter键后，Firefox中的第一行突然只有一个尾随空格，而不是两个。
  • 在Edge中，我得到1，在Chrome 2和Firefox中，换行符为3，而在所有情况下，显示屏仅显示1个空行。
  • 将innerHTML设置为innerText属性的值会导致更加惊人的差异（请参见右侧的图像）：边缘丢失了一行，firefox获得了一行?。而且我什至还无法测试Safari。 Edge似乎在控制台?‍♂️中的空格处显示了换行符。
<!-- https://www.samanthaming.com/tidbits/83-4-ways-to-convert-string-to-character-array/ -->
<div id="a" contenteditable="true" style="display: block; white-space: pre-wrap; padding: 4px; background: yellow;">a  </div>
<button onclick="console.log([...document.getElementById('a').innerText])">innerText</button>
<button onclick="console.log([...document.getElementById('a').innerHTML])">innerHTML</button>
<button onclick="document.getElementById('a').innerHTML = 'a  '">Reset</button>
<button onclick="document.getElementById('a').innerHTML = document.getElementById('a').innerText">Set innerHTML = innerText</button>

enter image description here

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

contenteditablehtmljavascript