使span元素"可编辑"

Question

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

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

Answer 1

现在已经过测试,并且确实有效(至少在Ubuntu 11.04上的Firefox 8和Chromium 14):

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

JS小提琴演示.

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

...如何检测用户何时在跨度外点击,以便我可以设置attr('contentEditable',false)

只需添加blur()方法:

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

JS小提琴演示.

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/