使 span 元素可编辑

Question

我有一个span元素，想要在双击后变成可编辑状态。也就是说，用户可以编辑文本，并在点击外部时保存。

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

- Randomblue

---

你尝试过什么？ - Ash Burlaczenko

Answer 1

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

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

JS Fiddle demo.

---

根据Randomblue的评论（下面）进行了编辑：

...如何检测用户点击span之外的区域，以便我可以设置attr('contentEditable', false)

只需添加 blur() 方法：

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

JS Fiddle demo。

- David Thomas

---

谢谢。但是我如何检测用户何时单击跨度之外，以便我可以设置 attr('contentEditable', false)？ - Randomblue

书签演示：javascript：$（'span，div，p'）.bind（'dblclick'，function（）{$（this）.attr（'contentEditable'，true）;}）; 点击外部事件：http://benalman.com/projects/jquery-outside-events-plugin/ - biziclop

@Randomblue，关于这个问题，请看下面我的回答。 - Aaron

我建议将 contentEditable 设置为空白（删除属性），而不是设置为 false，因为这样会更少出现错误。 - Nico Burns

我建议你将 .attr() 改为 prop()。来源：http://jquery.com/upgrade-guide/1.9/#attr-versus-prop- - Adonis K. Kakoulidis

我该如何获取编辑后的值，以便将其保存到数据库中？ - coder

Answer 2

如果您需要一个在所有现代浏览器中都能运行的解决方案，这里有一个我制作的非常好用的jQuery插件，它模拟了您所描述的功能： 只需将以下代码块放入您的代码库中即可：

//plugin to make any element text editable
//https://dev59.com/emoy5IYBdhLWcg3wcNrh#13866517
$.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/

- adamb

---

我修改了JSFIDDLE以增加更多的span。你能检查一下这个奇怪的行为吗：http://jsfiddle.net/JfMmH/? 谢谢！ - Daviddd

@Daviddd 我已解决了这个问题。请再次检查 jsFiddle 以获取更新的逻辑。 - adamb

Answer 3

我发现了一个很好的jQuery插件："X-editable In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery"，可进行原地编辑。网址是http://vitalets.github.com/x-editable/。

- Daviddd

Answer 4

上述方法是可行的：我已在这个jsfiddle中进行了测试：http://jsfiddle.net/nXXkw/ 此外，为了在用户点击元素后取消编辑权限，请添加以下代码：

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

- Aaron

Answer 5

我发现在这个主题上许多答案都已经过时了，但是adamb的解决方案对我来说是最简单的，谢谢。 然而，他的解决方案由于没有随着元素一起删除keypress事件而导致出现了多次触发的错误。 下面是使用$.on()替代$.bind()并在重新创建元素时移除keypress事件处理程序的更新插件。

$.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/

- Richard