CODEWITHSUNDEEP
javascriptjqueryhtmlfirefoxcontenteditable
Josh Sherick
Josh Sherick

Reputation: 2161

Firefox doesn't select contenteditable text properly

I'm trying to implement inline editing of elements in a web app. I'm doing this with contenteditable in order to preserve formatting as the user is editing an element.

After the user double clicks on an element, I change set it's contenteditable property to true and select the text (using the method from this SO question) so that they can begin editing right away without having to select the text. This works as expected in Chrome and Safari (don't care about IE). However, in Firefox, the text does get selected, but it's not editable until you deselect and reselect the text manually. (e.g. if you double click on an element, it gets selected, but if you start typing to edit the selected text, nothing will happen)

I've tried stopPropagation(), preventDefault() and execCommand('selectAll', false, null) to no avail.

Here's a JSFiddle to show you what I'm talking about. Try it in Chrome/Safari and Firefox to see what the problem is in Firefox.

$('#title').dblclick(function(){
    $('#title').attr({'contenteditable' : true});
    $('#title').css({'border-bottom' : '3px dashed #E3E1E4'});            
    selectText('title'); 
});

Upvotes: 3

Views: 1398

Answers (1)

jameslafferty
jameslafferty

Reputation: 2182

Add the following line to the dblclick handler:

$('#title').focus();

Upvotes: 1

Related Questions