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

Question

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

我做了一个 fiddle 来演示这个问题: 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

• Given a dom with multiple dom positions for the same visible positions, UA's currently vary in which position is considered the typeable position. Example: given foo<b>bar</b>baz

  • With the cursor between foo and bar, insertions happen:

    • IE: Click, outside B. Arrows, inside.
    • FF: Click, outside. Arrow from inside the tag, inside. Arrow from outside the tag, outside.
    • Chrome: Always out.

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