DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
22-02-2016

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


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

anime.js librería para animaciones en JavaScript

anime.js librería para animaciones en JavaScript

Sistema de particulas con Canvas

Sistema de particulas con Canvas

Animación Torus solo con HTML y CSS

Animación Torus solo con HTML y CSS

Algunos artículos que te pueden interesar

Introducción a las notificaciones en JavaScript

Introducción a las notificaciones en JavaScript

En HTML5 podemos emplear el objeto Notification (notificación) para configurar y mostrar mensajes informativos al usuario.

Andrés Cruz 09-02-2015

El elemento area y map en HTML

El elemento area y map en HTML

Con el elemento área es posible crear zonas clickeables dentro de una imagen; el elemento área debe de contener elementos hijos llamados map.

Andrés Cruz 26-11-2014

2 tags HTML que no conocias <base> y <abbr>

2 tags HTML que no conocias <base> y <abbr>

Andrés Cruz 19-11-2015