contentEditable + selectAll: Firefox won't allow keyboard input on dynamically generated content

Question

I'm having a problem in Firefox (other browsers seem to work fine) with dynamically generated elements containing a contenteditable="true" attribute:

If I selectAll (either dynamically, or with my mouse), Firefox won't allow keyboard input.

Please see my jsFiddle Example for reference. This appears to only affect 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 app I'm working on (pardon the dust): cr8.me/app/ff.html - What I'm wanting is to click (double-click to select all text) a Note, Category, or Plan Title to edit it. Does it work for anyone? Maybe it's just my configuration - or poor scripting. Lines 137, 572 are relevant.

Carmody

Works fine for me in Firefox 3.6. Which version do you use? 6.0? – Overshoe

Huh, provide even more details then (OS) :) I've checked in Fx 3.6.22 (Win XP) and 6.0.2 (Win 7 on virtual machine) and both work correctly. – Overshoe

6.0.2 on Mac OS 10.7.1 - but now I'm noticing it's working intermittently in my example - but not in my app. – Carmody

Here is the actual app I'm working on (pardon the dust): cr8.me/app/ff.html - What I'm wanting is to click (double-click to select all text) a Note, Category, or Plan Title to edit it. Does it work for anyone? Maybe it's just my configuration - or poor scripting. Lines 137, 572 are relevant. – Carmody

Ha, the app doesn't work (Fx 3.6 / XP), though the fiddle still does. – Overshoe

Yep, I can confirm that too - Firefox 3.6.2 and 6.0 / Linux Ubuntu - fiddle works while your app is not. – Lollipop

Answer 1

Apparently Firefox has issues with contenteditable on span elements (I'm assuming that's the case with other display: inline elements, though I've not tested it). Problem can be solved with simply replacing spans with divs. What's more - that divs can have "display: inline" property set on them using css and still working fine.

Check the working example here: http://jsfiddle.net/6sTJh/5/. The button with label "Add buggy" dynamically adds a span with contenteditable and its not working as expected, while button "Add working" appends div with contenteditable attribute and it's working just fine.

So is your app - when I replaced all the contenteditable spans with divs, the editing is working just fine in firefox 3.6 and firefox 6.0.

Side note: As to your application code - don't use the same id on multiple nodes (like you're doing with the same id "note-title" on every note) or you can get unexpected behavior from various browsers.

Generale rule is that you can have only one element with a given id on one page. Use class to "group" more than one elements and select them later on.

Lollipop

+1, good answer. I had trouble with contentEditable before, this was similar to my issue. – Cacogenics