it-swarm-pt.tech

Tornar o elemento de extensão "editável"

Eu tenho um elemento span que quero tornar editável ao clicar duas vezes. (Ou seja, o usuário pode editar o texto e ele será salvo quando clicar fora.)

O efeito que eu quero emular é semelhante ao clicar duas vezes em propriedades CSS nas Ferramentas do desenvolvedor do Google Chrome. Chrome (ver imagem.)

enter image description here

17
Randomblue

Agora testado e funciona (pelo menos Firefox 8 e Chromium 14 no Ubuntu 11.04):

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

JS Fiddle .


Editado em resposta ao comentário do Randomblue (abaixo):

... como faço para detectar quando o usuário clica fora do intervalo, para que eu possa definir attr ('contentEditable', false)

Basta acrescentar o método blur():

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

JS Fiddle .

32
David says reinstate Monica

Se você deseja uma solução que funcione em [~ # ~] todos os navegadores modernos (~ = ~) , aqui está um pequeno plugin bacana do jQuery que criei que simula a funcionalidade que você descreveu:

SIMPLESMENTE COLOQUE ESTE BLOCO NA SUA BASE DE CÓDIGO:

//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;
    }
});

Agora você pode tornar qualquer elemento editável simplesmente chamando .editable () em um objeto seletor de jQuery, assim:

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

Para obter as alterações após o usuário enviá-las, vincule ao evento "editsubmit", da seguinte maneira:

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

Aqui está uma demonstração de violino: http://jsfiddle.net/adamb/Hbww2/

9
adamb

Encontrei este plugin agradável do jQuery: "Edição no local editável por X com Bootstrap do Twitter, UI do jQuery ou jQuery puro" http://vitalets.github.com/x-editable/

2
Daviddd

O acima funciona: Eu testei neste jsfiddle: http://jsfiddle.net/nXXkw/

Além disso, para remover a capacidade de edição quando o usuário clicar no elemento, inclua:

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

Encontrei muitas respostas desatualizadas neste tópico, mas o adamb's foi a solução mais fácil para mim, obrigado.

No entanto, sua solução foi corrigida várias vezes por não remover o evento de pressionamento de tecla junto com o elemento.

Aqui está o plug-in atualizado usando $.on() em vez de $.bind() e com o manipulador de eventos de pressionamento de tecla sendo removido quando o elemento é criado novamente.

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

1
Richard