在可信的内联元素

Question

我有一个包含文字的可疑<p>元素，在此<p>元素中有一个内联元素，即<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内部的箭头键移动。