ContentEditable + selectAll: Firefox will not allow you to enter dynamically generated content on the keyboard

Question

I have a problem in Firefox (other browsers work fine) with dynamically generated elements containing the contenteditable="true" attribute:

If I selectAll (dynamically or using the mouse), Firefox will not allow keyboard input.

See the jsFiddle Example for help. It seems that this only affects Firefox.

 $(document).ready(function(){ $('.edit').live('dblclick', function () { document.execCommand('selectAll',false,null); }); $('#live').append('<p class="edit" contenteditable="true">This content is generated. Firefox will not allow keyboard input when "ALL" is selected.</p>'); }); 

EDIT: Here is the actual application I'm working on (pardon the dust): cr8.me/app/ff.html - I want to click (double- click to select all text) Note, category or plan name to edit his. Does it work for everyone? Maybe it's just my configuration - or bad scripting. Lines 137, 572 matter.

Answer 1

Firefox seems to have issues with contenteditable on span elements (I assume the case with a different display: inline elements, although I haven't tested it). The problem can be solved by simply replacing the intervals with divs . What else - divs have a display: inline property set to them using css and still working fine.

Check out the working example here: http://jsfiddle.net/6sTJh/5/ . A button that says “Add buggy” dynamically adds a range with contenteditable and does not work properly, and a button “Add work” adds a div with the attribute contenteditable, and it works fine.

So, your application - when I replaced all content ranges with a div, editing works fine in firefox 3.6 and firefox 6.0.

Side note: Regarding your application code - do not use the same identifier on multiple nodes (for example, you do with the same identifier “note-title” on each note), or you may get unexpected behavior from different browsers.

The rule of Generale is that on one page there can be only one element with the given identifier. Use the class to “group” several elements and subsequently select them.