Firefox - focusing on paragraph inside contenteditable

Question

Firefox doesn't seem to focus on the paragraph inside contenteditable. I tried to set the focus programmatically. The chromes seem to do the magic, and everything works fine.

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

• Press h2 and click the tab
  
• start of input - text is not displayed inside 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'); }); 

I also tried to set the carriage position, but it does not work in firefox, it works in 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(); } 

Thank you in advance

Answer 1

Well, I don't have official information about Firefox, but when I combined your two jsfiddle examples, I was able to get the caret in the right place. This seems to work well for me on Firefox 30 on Mac OSX 1.9.4. I was able to recreate the exact original problem by simply commenting out the setCaret() call.

Joint JSFiddle

One thing that I changed when merging the code was to shift the focus of the element to all the manipulations with the range, but I'm not sure if it affected.