Firefox中超链接内contenteditable span的问题 [英] Problems with contenteditable span inside hyperlink in Firefox

问题描述

我在< a>标签。我希望能够在跨度内编辑文本，因此重要的是：

I've got a contenteditable span placed inside an <a> tag. I'd like to be able to edit the text inside the span so it is important to:

• 将光标放在span


• 使用鼠标选择范围内的文本

两者均不起作用在Firefox中，只要超链接中有href属性（在我的情况下也是必需的）。没有该属性就没有问题，Chrome中也没有问题。

Both does not work in Firefox as soon as there is a href attribute in the hyperlink (which is also needed in my case). There is no problem without this attribute and there are no problems in Chrome.

请尝试

Please try my example on JSFiddle.

<ul>
  <li>
    <a href="#">
      <span contenteditable="true">PlacingCursorOrTextSelectionInFirefoxImpossible</span>
    </a>
  </li>
  <li>
    <a>
      <span contenteditable="true">noProblemsHereSoFar</span>
    </a>
  </li>
</ul>

推荐答案

您可以采取以下措施来改善点击行为：防止这样的传播：

What you can do to improve the click behaviour is to prevent its propagation like this:

<a href="#">
  <span contenteditable="true" onclick="event.stopPropagation();">
    PlacingCursorOrTextSelectionInFirefoxImpossible
  </span>
</a>

不幸的是，这只允许将光标放在 span ，但这是一个开始，而不是单击的地方。

Unfortunately, this only allows to put the cursor inside the span, but it is somewhy put to its beginning, not where one have clicked.

要启用选择功能，您需要防止拖动行为，但这是为 a 元素进行更改：

To enable selecting, you need to prevent the dragging behaviour, but it is to be changed for the a element:

<a href="#" draggable="false">
  <span contenteditable="true" onclick="event.stopPropagation();">
    PlacingCursorOrTextSelectionInFirefoxImpossible
  </span>
</a>

但是哇， draggable = false 实际修复了光标开始错误！这是工作示例（在FF 47中测试）： https://jsfiddle.net/8v1ebkfd/4/

But wow, draggable="false" actually fixed the "cursor to beginning" bug! Here's the working example (tested in FF 47): https://jsfiddle.net/8v1ebkfd/4/

这篇关于Firefox中超链接内contenteditable span的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！