Secciones editables en el HTML con el atributo contenteditable

- Andrés Cruz

In english
Secciones editables en el HTML con el atributo contenteditable

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:

ValorDescripcion
trueEspecifica que el elemento es editable.
falseEspecifica 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     
contenteditableChrome 4.0Internet Explorer 6.0Firefox 3.5Safari 3.1Opera 10.1

Enlaces de interés

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.