在 contenteditable 内联元素中的索引 0 处写入

Question

我有一个 contenteditable <p> 包含文本的元素，在这个 <p>element 里面有一个内联元素，它是一个 <span> contenteditable 不允许我在 <span> 中的索引 0 处写入

我做了一个小提琴来演示这个问题： JsFiddle

现在打开浏览器控制台，然后尝试在内联 <span> 的索引 0 处键入任何内容。如您所见，文本输入不会放在索引 0 处，而是放在第一个文本节点的最后一个索引处。

我已尝试使用 rangy.js 更改此行为。
这个想法是检查 carret 是否放置在第一个文本节点的最后一个索引处，然后在按下右箭头时，我会将 carret 放置到第二个节点中的索引 0 处。但问题依然存在。

      //rangy try without the if-statement.       
      var nodes = $el[1].childNodes, index = 0;
      var range = rangy.createRange();
      //Setting the start at node 2 index 0.
      range.setStart(nodes[1], index);
      range.collapse(true);
      var sel = rangy.getSelection();
      sel.setSingleRange(range);

Answer 1

这是一种实现（浏览器）特定的行为。

参考：http://www.w3.org/community/editing/wiki/ContentEditable#Collapsed_selections_.28carets.29

• 给定一个 dom 具有多个 dom 位置用于相同的可见位置，UA 目前在哪个位置被认为是不同的 可打字的位置。示例：给定foo<b>bar</b>baz

  • 光标在 foo 和 bar 之间，插入发生：

    • IE：点击，B 外侧。箭头，内侧。
    • FF：点击，外面。来自标签内部的箭头，内部。来自标签外部的箭头，外部。
    • Chrome：总是退出。

如您所见，不同浏览器的行为不同。在 IE 和 FF 中，您可以在 span 内部单击并使用箭头键移动到第一个位置，Chrome 将始终将光标放在您的 span 之外。此外，使用 FF，您只能使用箭头键从 span 内部移动，如果从光标外部移动，则光标应保留在外部。