Contenido editable por el usuario
Profesor: Javier López
Volver
Ejemplo práctico
Pregunta del millón

Ejemplo práctico
Para que un contenido sea editable (es decir, para que el usuario pueda modificar, eliminar o añadir texto) desde el propio navegador, dicho texto tiene que estar ubicado dentro de un <div> o de una etiqueta semántica (article, section...) con la propiedad 'contenteditable=true':
<section id="editable" contenteditable="true">
   <h2>Escribe tu pedido:</h2>
      <ul>
        <li>2 bolsas de patatas</li>
        <li>1 dónut</li>
        <li>4 Kg. de boniatos</li>
      </ul>
</section>   

El resultado del código anterior (añadiendo algo de código CSS) es el siguiente:

Escribe tu pedido:

  • 2 bolsas de patatas
  • 1 dónut
  • 4 Kg. de boniatos

  • Haz clic en el cuadro superior y modifica, elimina, añade líneas de texto o modifica el título.
    Si añades más elementos de los que caben dentro de la lista aparecerá un scroll vertical, que se produce gracias a este código CSS:
    #editable{
      overflow:auto;
    }
    

    Pregunta del millón
    La pregunta del millón que se produce habitualmente después de ver el funcionamiento de esta función es: 'Muy bien, perfecto y genial a la vez, pero ahora ¿cómo recupero la información que he escrito o modicado?'.

    La respuesta es que es posible obtener el contenido del <div> con las modificaciones realizadas por el usuario utilizando javaSript o jQuery.

    A modo de ejemplo, sin entrar a fondo en el tema, modifica el cuadro superior y pulsa el siguiente botón "Leer el contenido" para que el navegador coja su contenido y lo muestre en una ventana de alerta.

    El código de este botón es el siguiente, donde 'ejemplo' es el id del <div> donde hemos escrito..

    <button onclick="alert(document.getElementById('ejemplo').innerText)">
      Leer el contenido
    </button>