使跨度元素“可编辑” [英] Make span element "editable"

问题描述

我有一个 span 元素，我想通过双击进行编辑。 （也就是说，用户可以编辑文本，当他/她在外面点击时，它将会保存）。

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

我想模拟的效果与我双击时的效果类似，点击Google Chrome Developer Tools中的CSS属性。 （见图）

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

推荐答案

现在已经过测试，并且可以正常工作（至少在Ubuntu 11.04上使用Firefox 8和Chromium 14）：

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演示。

编辑回应Randomblue's评论（如下）：

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

...我如何检测用户在跨度外点击的次数，以便我可以设置attr（' contentCode'，false）

...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演示。

这篇关于使跨度元素“可编辑”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！