3

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'); 
});
Community
  • 1
  • 1
Josh Sherick
  • 2,161
  • 3
  • 20
  • 37

1 Answers1

1

Add the following line to the dblclick handler:

$('#title').focus();
jameslafferty
  • 2,152
  • 2
  • 21
  • 25
  • Whoops, I had to do this exact same thing in another place as a fix for Firefox, I should have known that. Thanks anyways, hopefully this will help someone else. For anyone wondering, you also need to add a `$('#title').blur();` when you turn contenteditable off – Josh Sherick Nov 16 '13 at 09:00