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

3D Box Control conTweenMax

3D Box Control conTweenMax

Calendario de cubo

Calendario de cubo

Creando un pulso con CSS

Creando un pulso con CSS

Algunos artículos que te pueden interesar

Dibujando nuestro propios SVG en HTML (parte 1)

Dibujando nuestro propios SVG en HTML (parte 1)

Un SVG no es más que un XML que describe como dibujar gráficos vectoriales en dos dimensiones y con HTML se ha hecho posible dibujarlos; en esta entrada veremos cómo dibujar formas básicas SVGs a través del elemento svg, definir estilo y sus atributos.

Andrés Cruz 11-05-2015

La API Vibration (Vibración) en HTML5

La API Vibration (Vibración) en HTML5

El método vibrate del objeto navigator permite activar la vibración por hardware de un dispositivo mediante JavaScript.

Andrés Cruz 04-02-2014

El elemento dialog (diálogo) en HTML5

El elemento dialog (diálogo) en HTML5

El elemento <dialog> (diálogo) define una caja de diálogo o simplemente una nueva ventana.

Andrés Cruz 20-11-2014