7

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.

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

1 Answer 1

7
+50

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.

1
  • 2
    +1, good answer. I had trouble with contentEditable before, this was similar to my issue. Sep 23, 2011 at 9:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.