Сделать элемент span «редактируемым»

17

У меня есть элемент span , который я хочу сделать редактируемым при двойном щелчке. (То есть, пользователь может редактировать текст, и он будет сохранять, когда он / она нажимает на него.)

Эффект, который я хочу эмулировать, аналогичен тому, когда я дважды нажимаю свойства CSS в Инструментах разработчика Google Chrome. (См. Рисунок.)

    
задан Randomblue 17.12.2011 в 22:44
источник

5 ответов

30

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

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

демонстрационная версия JS Fiddle .

Отредактировано в ответ на комментарий Randomblue (ниже):

  

... как определить, когда пользователь нажимает за пределы диапазона, так что я могу установить attr ('contentEditable', false)

Просто добавьте метод blur() :

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

демо JS Fiddle .

    
ответ дан David Thomas 17.12.2011 в 22:46
источник
9

Если вы хотите решение, которое работает в современных браузерах ВСЕ , вот отличный маленький плагин 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's being submitted.

Вот демонстрация скриптов: Ссылка

    
ответ дан adamb 13.12.2012 в 19:55
источник
2

Я нашел этот приятный плагин jQuery: «X-редактируемое редактирование на месте с помощью Twitter-загрузки, jQuery UI или чистого jQuery» Ссылка     

ответ дан Daviddd 27.03.2013 в 16:12
источник
1

Вышеупомянутые работы: я протестировал его в этом jsfiddle: Ссылка

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

$('span').bind('blur',function(){
    $(this).attr('contentEditable',false);
});
    
ответ дан Aaron 17.12.2011 в 22:52
источник
0

Я нашел много ответов, чтобы быть устаревшими на эту тему, но 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;
    }
});

Ссылка

    
ответ дан Richard 31.01.2016 в 02:31
источник