Contenido editable

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>

Contenido editable por el usuario

Ejemplo práctico

Escribe tu pedido:

Pregunta del millón