Hola de nuevo. En esta ocasión traigo un mini articulo sobre el atributo HTML5 contenteditable. Este atributo no solo tiene por que ir asociado a un Div, puede asociarse a cualquier etiqueta HTML que pueda contener texto (spam, td, strong…).
¡Empezamos!
¿Para qué sirve ‘Contenteditable’?
Muy simple, al añadir el atributo contenteditable a la etiqueta HTML, esta pasa a tener las propiedades de un <textarea>, es decir, se puede escribir en ella, y no solo eso, también funcionan los atajos de teclado (Control+C, Control+V…) y todas aquellas propiedades que tiene un textarea.
¿Si funciona como un textarea, qué ventajas sobre este ofrece?
A parte de que son más personalizables, de una forma fácil y usando jQuery (de JavaScript) podremos hacer que cualquier etiqueta de nuestro HTML sea editable.
¿Como hago que un div, span, td, etc, sea editable?
Más fácil aún. Tenemos dos opciones, que desde el primer momento nuestra etiqueta sea editable:
Contenido editable
O con jQuery (Al hacer click, la etiqueta se convertirá en editable):
Contenido editable
Contenedor
Este atributo solo tiene dos posibilidades «true» o «false«, con true estará activo y con false dejará de estarlo.
¿Es totalmente compatible?
No. Al ser una propiedad HTML5, sólo será compatible con los navegadores que compatibles con HTML5.