javascript - 制作 span 元素 "editable"

Question

我有一个 span 元素，我希望它在双击时变为可编辑状态。 (也就是说，用户可以编辑文本，当他/她在外面点击时，它会保存。)

我想模拟的效果类似于我在 Google Chrome 开发者工具中双击 CSS 属性。 (见图。)

Answer 1

现已测试，确实有效(至少在 Ubuntu 11.04 上的 Firefox 8 和 Chromium 14):

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

JS Fiddle demo .

---

编辑以回应 Randomblue 的评论(如下):

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

只需附加 blur() 方法:

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

JS Fiddle demo .