El atributo contenteditable es uno de esos atributos ocultos o de los que poco se conocen pero que en realidad pueden resultar bastantes útiles y se trata de un sencillo atributo llamado contenteditable aplicable a cualquier elemento y como su nombre indica permite establecer que el contenido de un elemento sea editable; su sintaxis es la siguiente:
<element contenteditable="true|false">Uso práctico del atributo contenteditable
Con el siguiente HTML:
<p contenteditable="true">Edita el siguiente contenido dando un clic sobre este texto.<p>Obtenemos:
Edita el siguiente contenido dando un clic sobre este texto.
Valores del atributo contenteditable
Cómo puedes deducir del ejemplo anterior, solo maneja dos tipos de valores:
| Valor | Descripcion |
|---|---|
| true | Especifica que el elemento es editable. |
| false | Especifica que el elemento no es editable. |
Este atributo es muy útil para crear nuestro propio procesador de textos al poder editar cualquiera de los elementos que forman una página web como lo hacen algunos plugins WYSIWYG (acrónimo de "What You See Is What You Get) para JavaScript a través de un contenedor div:
<div id="editor" contentEditable="true"></div>Eventos del atributo contenteditable
Esta es una buena pregunta, generalmente cuando trabajamos con nuevas APIs, tecnologías o elementos, estos cuentan con ciertas funcionalidades que los hacen únicos, entre ellos sus eventos; sin embargo, el atributo contenteditable no cuenta con eventos específicos para el.
Para los elementos que empleen el atributo contenteditable podemos emplear los eventos existentes como onfocus y onblur.
Soporte de los navegadores
Este es un punto crucial saber si podemos emplearlas en nuestras aplicaciones sin preocuparnos demasiado por el soporte como en el caso de Eventos de Luz Ambiental con JavaScript; es una tecnología que forma parte de la API de HTML5 y presenta un gran soporte con todos los navegadores más populares desde sus versiones iniciales:
| Attribute | |||||
|---|---|---|---|---|---|
| contenteditable | Chrome 4.0 | Internet Explorer 6.0 | Firefox 3.5 | Safari 3.1 | Opera 10.1 |
Enlaces de interés
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter