克服 contenteditable 中不一致的 <br> 选择行为

Posted 2023-03-06

【中文标题】克服 contenteditable 中不一致的 <br> 选择行为

【英文标题】：Overcoming inconsistent <br> selection behavior in contenteditable

【发布时间】：2021-07-05 16:52:34

【问题描述】：

我注意到 Chrome 中有一个奇怪的行为，我试图选择一堆 div-br-div 行。

在这段代码中：

  <section contenteditable>
  <div>--- end selection here ---</div>
  <div>Some -div-br-div- lines:</div>
  <div><br></div>
  <div><br></div>
  <div><br></div>
  <div><br></div>
  <div><br></div>
  <div><br></div>
  <div>--- start selection above this line ---</div>
  </section>

如果我在“开始选择”行上方开始选择，然后将其向上移动到“结束选择”行，我会得到以下行为：

在 Chrome 和 Brave 中，会跳过开头和下一行：

在 Firefox 中，所有 br 行都被跳过：

而在 Safari 中，所有选中的行都会被高亮显示：

如何让 Chrome 在选择时不会在视觉上跳过行并执行类似于 Safari 的正常文本编辑器行为？

这是一个演示，您可以在其中尝试选择行： https://jsfiddle.net/8r5m24t7/3/

请注意，如果我从非 br 行开始选择（例如，使用单词“start”），它将按预期选择：

谢谢。

【参考方案1】：

实际上这些行并没有“跳过”。如果您复制然后粘贴到文本编辑器中，您将看到每个换行符都已被复制。它只是关于浏览器如何显示选择的方式。

如何让 Chrome 在选择中不跳过行

您根本不应该尝试这样做。您是内容创建者，因此您不对浏览器如何可视化选择空白字符负责。

此外，您应该使用 CSS 而不是使用 <br> 标签在块之间创建空格，在某些情况下应该仅用于单个换行符，因此在实际文档/应用程序中根本不会出现这种情况。

【讨论】：

感谢您的回复。 “跳过”是指视觉上的跳过。我想要的是，如果用户从空行而不是字符开始选择，则选择文本的体验在视觉上一致并且在 Chrome 上看起来不会损坏。

我明白了。它确实看起来坏了。尝试向谷歌开发人员报告问题：support.google.com/chrome/answer/… 恐怕唯一要做的就是创建自己的 JS 应用程序，它将重新创建浏览器的工作，以完全按照您的意愿呈现所有内容，这不是好主意