javascript - Firefox - 在 contenteditable 中聚焦一个段落

Question

Firefox 似乎没有将焦点设置在 contenteditable 内的段落上。我尝试以编程方式设置焦点。 Chromes 似乎有一些魔力，一切正常。

<h2 contenteditable="true">Some text</h2><br/><br/>
<div contenteditable="true">
  <p id="test">Paragraph text</p>
</div>

1. 点击 h2 并点击标签
   
2. 开始输入 - 文本没有出现在 P 中。

JSFiddle - http://jsfiddle.net/THPmr/126/

$( "#test" ).focus(function() {
  $( "<span>Focused!</span>" ).appendTo( "body" ).fadeOut( 1000 );
});

$("#before").on('keydown', function(e){
            if(e.which == 9){
                $('#test').triggerHandler('focus');
            }

        });

$("#test").bind( "focus", function() {
   $("#test").css('background', 'yellow');   
});

我也尝试设置插入符位置，但它在 firefox 中不起作用，在 chrome 中起作用

JSFiddle - http://jsfiddle.net/vXnCM/2998/

function setCaret() {
    var el = document.getElementById("test");
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(el, 0);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    el.focus();
}

提前致谢

Answer 1

好吧，我没有任何正式的 Firefox 信息，但是当我将您的两个 jsfiddle 示例合并在一起时，我能够在正确的位置获得插入符号。在 Mac OSX 1.9.4 上的 Firefox 30 中，这似乎对我来说效果很好。通过简单地注释掉对 setCaret() 的调用，我能够重新创建确切的原始问题。

Merged JSFiddle

合并代码时我更改的一件事是将元素焦点移动到所有范围操作之前发生，但我不确定这是否有任何影响。