Question

Firefox似乎没有把注意力集中在满足于内容的段落上。我事件试图以编程方式设置焦点。 Chromes似乎做了一些魔术，一切正常。

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

点击h2并点击标签
开始输入 - 文本未出现在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

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

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

1 个答案: