Safari 中的插入符号问题与 contenteditable SVG

Posted 2023-03-28

【中文标题】Safari 中的插入符号问题与 contenteditable SVG

【英文标题】：Caret issue in Safari with contenteditable SVG

【发布时间】：2021-09-24 09:18:03

【问题描述】：

我正在使用 contenteditable="true" 编辑 SVG 中的文本。在除 Safari 之外的所有浏览器中都可以使用。 Safari 的插入符号位置存在问题：

示例代码：

[contenteditable]
  -webkit-user-select:text;
  user-select:text;

<div contenteditable="true"  style="background: #ffe7e7">
  <svg style="display:inline-block">
    <text id="text" y="2em">Hello world</text>
  </svg>
</div>

【问题讨论】：

Webkit 对于 contenteditable 有大量 (353) 个未解决的错误 - 所以这并不奇怪。

【参考方案1】：

过去我也遇到过类似的问题。不幸的是，答案是承认 safari 有时会遇到特殊问题，我不得不在支持 safari 或重新考虑方法之间做出决定。因为我不想放弃 saffari，所以我完全重新考虑了这种布局的必要性，但是 YMMV。您可以找到与 contenteditable here 相关的 safari 问题的问题跟踪器。

【参考方案2】：

如果您的 Safari 浏览器是最新的 (contenteditable is fully supported from 3.1.)，您的问题很可能是 webkit 和 safari 在 contenteditable 方面非常存在错误。这里是Safari's bugs。

【讨论】：

如果低于 3.1，不支持 contenteditable。

版本，我的意思是

【参考方案3】：

我们通过实施自己的插入符号解决了这个问题。系统插入符号被样式规则隐藏。

【讨论】：

如果你解释了你是如何做到的，这将是一个很好的答案。