Hacer nuestro contenido Editable con HTML5

< 1 minuto(s)

En esta página:

Demo Github

Demo Github

Html5 es una caja de sorpresas que aun no termina de sorprendernos, es quizás la versión mas extensa en cuanto a las funcionalidades que dispone este excelente Lenguaje de Marcado y maquetado Web.

En Html5 existe la propiedad llamada contenteditable, esta propiedad nos da la opción de hacer editable un elemento en nuestra pagina Html5, esta propiedad dispone de 2 sencillas opciones:

true = El contenido del elemento es Editable.

false = El contenido del elemento no es Editable.

Por ejemplo si queremos que un sencillo párrafo con un determinado texto, sea editable:


<p>
  El Arroz con leche es un postre muy degustado en la comida Peruana, es una mezcla deliciosa de Leche con Arroz.<br>
  La inversión para su preparación no es muy costosa.<br>
  Un postre similar vendría a ser el Arroz Zambito.
</p>

<p>

El Arroz con leche es un postre muy degustado en la comida Peruana, es una mezcla deliciosa de Leche con Arroz.<br>

La inversión para su preparación no es muy costosa.<br>

Un postre similar vendría a ser el Arroz Zambito.

</p>

Sencillamente agregamos lo siguiente:
<p contenteditable="true"

Con esa propiedad automáticamente se podrá editar el contenido haciendo click en el párrafo y si queremos que no sea editable, simplemente le aplicamos false o retiramos la etiqueta del elemento.

En la Demo y el repositorio Git pueden obtener y ver el código Fuente.

Espero les sea de mucha utilidad este Artículo.

Hasta nuestro siguiente Artículo o Tutorial !