Firefox - 将一个段落集中在令人满意的范围内

Question

Firefox似乎没有把注意力集中在满足于内容的段落上.我事件试图以编程方式设置焦点.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().

合并JSFiddle

合并代码时我改变的一件事是在所有范围操作之前移动元素焦点,但我不确定它是否有任何影响.