Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 843
Josiah Avatar asked Sep 17 '11 19:09

Josiah


1 Answers

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.

like image 160
WTK Avatar answered Sep 18 '22 20:09

WTK