Make span element "editable"

Question

I have a span element that I want to become editable upon double-click. (That is, the user can edit the text and it will save when s/he clicks outside.)

The effect I want to emulate is similar to when I double-click CSS properties in the Google Chrome Developer Tools. (See picture.)

Answer 1

Now tested, and does work (at least Firefox 8 and Chromium 14 on Ubuntu 11.04):

$('span').bind('dblclick',     function(){         $(this).attr('contentEditable',true);     }); 

JS Fiddle demo.

---

Edited in response to Randomblue's comment (below):

...how do I detect when the user clicks outside the span, so that I can set attr('contentEditable', false)

Just append the blur() method:

$('span').bind('dblclick', function() {         $(this).attr('contentEditable', true);     }).blur(         function() {             $(this).attr('contentEditable', false);         }); 

JS Fiddle demo.