Question

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

我想模仿的效果类似于我在Google Chrome开发者工具中双击CSS属性时的效果。（见图。）

enter image description here

Answer 1

现已测试，并且确实有效（至少在Ubuntu 11.04上的Firefox 8和Chromium 14）：

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

JS Fiddle demo

已编辑以回应Randomblue的评论（下方）：

...如何检测用户何时点击跨度，以便我可以设置attr（'contentEditable'，false）

只需附加blur()方法：

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

JS Fiddle demo

Answer 2

如果你想要一个适用于所有现代浏览器的解决方案，这里有一个漂亮的小jQuery插件我模仿你描述的功能：

简单地将这个块插入你的代码库：

//plugin to make any element text editable
//http://stackoverflow.com/a/13866517/2343
$.fn.extend({
    editable: function() {
        var that = this,
            $edittextbox = $('<input type="text"></input>').css('min-width', that.width()),
            submitChanges = function() {
                that.html($edittextbox.val());
                that.show();
                that.trigger('editsubmit', [that.html()]);
                $(document).unbind('click', submitChanges);
                $edittextbox.detach();
            },
            tempVal;
        $edittextbox.click(function(event) {
            event.stopPropagation();
        });

        that.dblclick(function(e) {
            tempVal = that.html();
            $edittextbox.val(tempVal).insertBefore(that).bind('keypress', function(e) {
                if ($(this).val() !== '') {
                    var code = (e.keyCode ? e.keyCode : e.which);
                    if (code == 13) {
                        submitChanges();
                    }
                }
            });
            that.hide();
            $(document).click(submitChanges);
        });
        return that;
    }
});

现在你可以通过在jQuery选择器对象上调用.editable（）来编辑任何元素，如下所示：

$('#YOURELEMENT').editable();

要在用户提交更改后获取更改，请绑定到“editsubmit”事件，如下所示：

$('#YOURELEMENT').editable().bind('editsubmit', function(event, val) {});
//The val param is the content that's being submitted.

这是一个小提琴演示：http://jsfiddle.net/adamb/Hbww2/

Answer 3

我找到了这个不错的jQuery插件：“使用Twitter Bootstrap，jQuery UI或纯jQuery进行X-editable就地编辑”http://vitalets.github.com/x-editable/

Answer 4

以上作品：我在这个jsfiddle中测试了它：http://jsfiddle.net/nXXkw/

此外，要在用户点击元素时删除可编辑性，请包括：

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

Answer 5

我发现许多答案在这个主题上已经过时，但adamb对我来说是最简单的解决方案，谢谢。

但是，由于没有将keypress事件与元素一起删除，他的解决方案被多次触发。

这是使用$.on()而不是$.bind()更新的插件，并且在重新创建元素时删除了按键事件处理程序。

$.fn.extend({
    editable: function() {
        var that = this,
            $edittextbox = $('<input type="text"></input>').css('min-width', that.width()),
            submitChanges = function() {
                that.html($edittextbox.val());
                that.show();
                that.trigger('editsubmit', [that.html()]);
                $(document).off('click', submitChanges);
                $edittextbox.detach();
            },
            tempVal;
        $edittextbox.click(function(event) {
            event.stopPropagation();
        });

        that.dblclick(function(e) {
            tempVal = that.html();
            $edittextbox.val(tempVal).insertBefore(that).off("keypress").on('keypress', function(e) {
                if ($(this).val() !== '') {
                    var code = (e.keyCode ? e.keyCode : e.which);
                    if (code == 13) {
                        submitChanges();
                    }
                }
            });
            that.hide();
            $(document).one("click", submitChanges);
        });
        return that;
    }
});

http://jsfiddle.net/Hbww2/142/

使span元素“可编辑”

5 个答案: