Caret默认以Firefox上可编辑的锚点结尾

Question

我已使锚元素可编辑。在Firefox上，我无法将插入符号放置在特定区域。我只能将插入号转到文本的开头或结尾。

例如；对于文本abcdef，我想在d和e之间单击，插入符号应在d和e之间。但是，当我单击此处时，插入符号将转到a之前或f之后。如果您在Firefox Windows 10上运行以下代码，则应该遇到相同的问题。任何想法如何解决此问题？

<div><a href="#"><span contenteditable="true">abcdefg</span></a></div>

*注意，我需要将跨距的“设计”保留在锚点内。我无法删除跨度，而只能使锚内容可编辑。

Answer 1

我已经找到您问题的解决方案，它已经在2016年发布在here中，所以是@YakovL。

[基本上，Firefox默认将属性draggable设置为true，而其他浏览器已将属性设置为false。这样可以防止将光标放置在正确的位置。我将在下面演示它：

Firefox默认值

<div>
  <a href="#" draggable="true">
    <span contenteditable="true">Note: this example may only work the way it should in FireFox</span>
  </a>
</div>

被操纵（工作）的行为

<div>
  <a href="#" draggable="false">
    <span contenteditable="true">Tested to work in FireFox (macOS)</span>
  </a>
</div>

希望这会有所帮助！再次感谢@YakovL

Answer 2

我可以确认在Mac OS的FireFox上也会发生这种现象。对我来说似乎是FF错误。