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.