Tengo un span elemento que quiero ser editable con doble clic. (Es decir, el usuario puede editar el texto y va a salvar cuando hace clic fuera.)

El efecto que quiero emular es similar a cuando yo haga doble clic en propiedades de CSS en Google Chrome Developer Tools. (Ver imagen).

Realizar elemento span

  • Y has probado, ¿qué?
InformationsquelleAutor Randomblue | 2011-12-17

5 Comentarios

  1. 31

    Ahora probado, y funciona (al menos en Firefox 8 y Cromo 14 en Ubuntu 11.04):

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

    JS Violín demo.


    Editado en respuesta a Randomblue comentario (abajo):

    …¿cómo detectar cuando el usuario hace clic fuera de la luz, para que yo pueda establecer attr(‘contentEditable’, false)

    Sólo anexar el blur() método:

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

    JS Violín demo.

    • Gracias. Pero ¿cómo detectar cuando el usuario hace clic fuera de la luz, para que yo pueda establecer attr('contentEditable', false)?
    • bookmarklet demo: javascript:$(‘span,div,p’).bind(‘doble clic’,function(){$(this).attr(‘contentEditable’,true);}); haga Clic en eventos externos: benalman.com/projects/jquery-outside-events-plugin
    • para esto, véase mi respuesta a continuación.
    • Recomiendo el establecimiento de la contentEditble en blanco (eliminar el atributo) en lugar de falso, como lo es menos buggy.
    • Yo sugeriría que usted a cambio .attr() a prop(). fuente : jquery.com/upgrade-guide/1.9/#attr-versus-prop-
    • ¿Cómo puedo obtener el valor editado, para que pueda guardar en la base de datos?

  2. 9

    Si quieres una solución que funciona en TODOS navegadores modernos, he aquí un ingenioso poco plugin de jQuery que me hizo que emula la funcionalidad que se describe:

    SIMPLEMENTE SOLTAR ESTE BLOQUE EN SU CÓDIGO BASE:

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

    Ahora usted puede hacer que cualquier elemento editable simplemente llamando .editable() en jQuery selector de objeto, así:

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

    Para obtener los cambios después de que el usuario se somete a ellos, se unen a la «editsubmit de» evento», así:

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

    Aquí un violín demo: http://jsfiddle.net/adamb/Hbww2/

    • He modificado el JSFIDDLE tener más vínculos. Podría usted comprobar este comportamiento extraño: jsfiddle.net/JfMmH? Gracias!
    • He resuelto este problema. Por favor, compruebe el jsFiddle de nuevo para actualizar la lógica.
    • Muchas gracias. Funciona!
  3. 1

    El anterior funciona: lo he probado en este jsfiddle: http://jsfiddle.net/nXXkw/

    También, para eliminar la capacidad de edición cuando el usuario hace clic fuera del elemento, que incluyen:

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

    He encontrado muchas respuestas a estar fuera de la fecha sobre este tema, pero adamb era la solución más fácil para mí, gracias.

    Sin embargo, su solución fue intervenida a fuego varias veces debido a que no se elimine el evento keypress, junto con el elemento.

    Aquí está la actualización del plugin usando $.on() en lugar de $.bind() y con el evento keypress controlador de ser eliminado cuando el elemento es creado de nuevo.

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

Dejar respuesta

Please enter your comment!
Please enter your name here