Secciones editables en el HTML con el atributo contenteditable

22-02-2016 - Andrés Cruz

Secciones editables en el HTML con el atributo contenteditable In english

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.

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.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!