Home/ Questions/Q 6606155
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T19:21:57+00:00

I’m having a problem in Firefox (other browsers seem to work fine) with dynamically

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0