Make span element "editable"

html, javascript, jquery

Solution

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.

Problem

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.)

Original source