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.

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.

• javascript
• jquery
• firefox
• contenteditable
• selectall

• Works fine for me in Firefox 3.6. Which version do you use? 6.0? – jakub.g Commented Sep 17, 2011 at 21:18
• 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. – jakub.g Commented Sep 17, 2011 at 21:25
• 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. – Josiah Commented Sep 17, 2011 at 21:34
• 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. – Josiah Commented Sep 17, 2011 at 21:59
• Ha, the app doesn't work (Fx 3.6 / XP), though the fiddle still does. – jakub.g Commented Sep 17, 2011 at 23:21

1 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/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.