Сделать элемент span "editable"

Ответ 1

Теперь тестируется и работает (по крайней мере, Firefox 8 и Chromium 14 на Ubuntu 11.04):

$('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.

Ответ 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;
    }
});

Теперь вы можете сделать любой элемент редактируемым просто путем вызова .editable() в объекте селектора jQuery, например:

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

Чтобы получить изменения после того, как пользователь отправит их, привяжите к событию "editsubmit", например:

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

Вот сценарий: http://jsfiddle.net/adamb/Hbww2/

Ответ 3

Я нашел этот приятный плагин jQuery: "X-редактируемое редактирование на месте с помощью Twitter Bootstrap, jQuery UI или чистого jQuery" http://vitalets.github.com/x-editable/

Ответ 4

Вышеупомянутые работы: я тестировал это в этом jsfiddle: http://jsfiddle.net/nXXkw/

Кроме того, чтобы удалить редактируемость, когда пользователь нажимает на элемент, включите:

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

Ответ 5

Я нашел много ответов, чтобы быть устаревшими на эту тему, но adamb был самым легким решением для меня, спасибо.

Однако его решение было прослушивать несколько раз из-за того, что он не удалял событие нажатия клавиши вместе с элементом.

Здесь обновленный плагин с использованием $.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/