Este es mi código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
        <meta name="viewport" content="width=device-width, user-scalable=no"> 
    </head> 
<body> 
        <style type="text/css" media="screen"> 

        </style> 

        <!--<div id="map_canvas" style="width: 500px; height: 300px;background:blue;"></div>-->

        <div class=b style="width: 200px; height: 200px;background:pink;position:absolute;left:500px;top:100px;"></div>
        <script src="jquery-1.4.2.js" type="text/javascript"></script>
        <script src="jquery-ui-1.8rc3.custom.min.js" type="text/javascript"></script>
        <script type="text/javascript" charset="utf-8"> 

        </script> 
    </body> 
</html>

Gracias

InformationsquelleAutor zjm1126 | 2010-03-14

8 Comentarios

  1. 136

    Vamos a trabajar a través de él.

    Usted no puede hacer que un div editable. No hay tal cosa como un editable div, al menos por ahora. Así que el problema es averiguar qué usar para la edición de lugar. Un textarea funciona a la perfección. Así que la idea es de alguna manera conseguir un textarea donde el div se encuentra en la actualidad.

    La pregunta es cómo y de dónde sacamos la caja de texto. Hay varias maneras, pero una de ellas es crear dinámicamente un textarea sobre la marcha:

    var editableText = $("<textarea />");

    y reemplazarlo con el div:

    $("#myDiv").replaceWith(editableText);

    El textarea en su lugar. Pero está vacía y hemos sustituido el div y lo perdió todo. Así que tenemos que preservar el texto de la etiqueta div de alguna manera. Una manera de hacerlo es copiar el texto/html dentro de la etiqueta div antes de reemplazarlo:

    var divHtml = $("#myDiv").html(); //or text(), whatever suits.

    Una vez que tenemos el código html de la div, podemos rellenar el cuadro de texto y reemplazar con seguridad el div con el textarea. Y establecer el foco en el interior de la caja de texto como el usuario desee iniciar la edición. La combinación de todo el trabajo hasta este punto, obtenemos:

    //save the html within the div
    var divHtml = $("#myDiv").html();
    //create a dynamic textarea
    var editableText = $("<textarea />");
    //fill the textarea with the div's text
    editableText.val(divHtml);
    //replace the div with the textarea
    $("#myDiv").replaceWith(editableText);
    //editableText.focus();

    Es funcional, pero no pasa nada cuando un usuario hace clic en un div por que no la instalación de cualquier tipo de evento. Vamos a conectar los eventos. Cuando el usuario hace clic en cualquier div $("div").click(..), vamos a crear un controlador de clic, y hacer todo lo anterior.

    $("div").click(function() {
        var divHtml = $(this).html(); //notice "this" instead of a specific #myDiv
        var editableText = $("<textarea />");
        editableText.val(divHtml);
        $(this).replaceWith(editableText);
        editableText.focus();
    });

    Esto es bueno, pero nos gustaría una manera de lograr que nuestros div atrás cuando un usuario hace clic fuera o sale de la caja de texto. Hay un blur de eventos para los controles de formulario que se activa cuando un usuario deja el control. Que puede ser utilizado para detectar cuando un usuario sale de la caja de texto, y reemplazar la parte posterior de la div. Hacemos el exacto reverso de este tiempo. Preservar el valor de los textarea, crear una dinámica de div, establece que es html, y reemplazar el textarea.

    $(editableText).blur(function() {
        //Preserve the value of textarea
        var html = $(this).val();
        //create a dynamic div
        var viewableText = $("<div>");
        //set it's html 
        viewableText.html(html);
        //replace out the textarea
        $(this).replaceWith(viewableText);
    });

    Todo está bien, excepto que esta nueva div ya no se convierta en un textarea en haga clic en. Este es un recién creado div, y vamos a tener que configurar el click evento de nuevo. Ya tenemos todo el código, pero mejor que repetirlo dos veces, es mejor hacer una función a partir de éste.

    function divClicked() {
        var divHtml = $(this).html();
        var editableText = $("<textarea />");
        editableText.val(divHtml);
        $(this).replaceWith(editableText);
        editableText.focus();
        //setup the blur event for this new textarea
        editableText.blur(editableTextBlurred);
    }

    Ya que toda la operación es de dos vías reversibles, tendremos que hacer lo mismo para el textarea. Vamos a convertirlo en una función demasiado.

    function editableTextBlurred() {
        var html = $(this).val();
        var viewableText = $("<div>");
        viewableText.html(html);
        $(this).replaceWith(viewableText);
        //setup the click event for this new div
        $(viewableText).click(divClicked);
    }

    Cableado de todo junto, tenemos 2 funciones, divClicked, editableTextBlurred y la línea de abajo desencadena todo:

    $("div").click(divClicked);

    Checkout este código en http://jsfiddle.net/GeJkU/. Esta no es la mejor manera de escribir editable divs por cualquier medio, pero sólo una manera de empezar y el enfoque de la solución paso a paso. Sinceramente he aprendido tanto como en la redacción de esta pieza larga. La firma, adios!

    • Hay varios otros existentes en el lugar del editor de plugins para jQuery mencionados en este hilo – stackoverflow.com/questions/708801/…. Editable y Jeditable como Sarfaraz ya se ha mencionado, son algunos de los buenos, pero no sé qué tiene edición en el lugar tiene algo que ver con Star Wars 😀
    • buen tutorial. La gente va a aprender de esto. gracias.
    • contenteditable=»true» no permitir esta capacidad. Es decir, se ha sostenido desde el 5.5 y HTML5 proporciona para este
    • ¿Por qué tenemos que seguir todos estos? No podemos hacer div editable usando el atributo contenteditable=»true». Yo la he utilizado muchas veces y nunca frente a los problemas.
    • Bien explicado !! Gracias !!
    • Hice un plugin de jquery fuera de su idea: jquery-html editable
    • Bonita explicación, pero tengo que downvote este, ya que se basa en una premisa que no es verdad: «Usted no puede hacer que un div editable.» Como otros ya han dicho, con el puede hacer un div editable usando contenteditable=»true». La respuesta debe ser actualizado para incluir esa opción. (Este enfoque es un montón de esfuerzo innecesario cuando ya hay una opción fácil.)

  2. 76

    Para hacer un <div> (o cualquier elemento para que la materia) editable puede utilizar el contenteditable atributo HTML.

    Por ejemplo:

    HTML:

    <div contenteditable="true">Anything inside this div will be editable!</div>

    Más info aquí: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable

    • El div no se comporta como normal div cuando contenteditable=»true» en el respeto a los enlaces que se vuelven inactivas.
    • El método para tener vínculos permanecen activas se muestra aquí: stackoverflow.com/questions/12059211/…
  3. 4

    Para aquellos que buscan una on() versión, esto se basa en Anurag la respuesta.

    Si, por alguna razón, quería dar el evento click fuera de la editables de entrada de texto (por ejemplo, para ver editables y no editables versiones de contenido), más adelante se puede aplicar $(document).off("click", ".editable_text");.

    JS:

    $(document).on("click", ".editable_text", function() {
      var original_text = $(this).text();
      var new_input = $("<input class=\"text_editor\"/>");
      new_input.val(original_text);
      $(this).replaceWith(new_input);
      new_input.focus();
    });
    
    $(document).on("blur", ".text_editor", function() {
      var new_input = $(this).val();
      var updated_text = $("<span class=\"editable_text\">");
      updated_text.text(new_input);
      $(this).replaceWith(updated_text);
    });

    CSS:

    .text_editor {
      border: none;
      background: #ddd;
      color: #000;
      font-size: 14px;
      font-family: arial;
      width: 200px;
      cursor: text;
    }

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <p><span class="editable_text">Here is my original text.</span>
    </p>

  4. 3

    contenteditable tiene algunos de los graves defectos. La prueba más importante, en mi opinión, es la cruz de navegador incompatibilidad de Entrar en uso. Ver este artículo para una descripción. En Firefox hacer clic en Entrar para un retorno de carro se crea un nuevo párrafo, efectivamente doble espacio, cada línea que no es lo suficientemente largo para envolver. Es muy feo.

    • Esto no responde a la OP de la pregunta. Este debe ser un comentario en su lugar.
  5. 0

    puede intentar esta

     <!DOCTYPE html>
        <html>
        <body>
    
        <div id="myP">This is a paragraph. Click the button to make me editable.</div>
    
        <button onclick="myFunction()">Try it</button>
    
        <p id="demo"></p>
    
        <script>
        function myFunction() {
            document.getElementById("myP").contentEditable = true;
            document.getElementById("demo").innerHTML = "The p element above is now editable. Try to change its text.";
        }
        </script>
    
        </body>
        </html>

Dejar respuesta

Please enter your comment!
Please enter your name here