Atributos globales en html5, explicación del atributo contenteditable.

contenteditable

Es un nuevo atributo en esta versión de HTML5, el cual permite editar en línea el elemento sobre el cual se aplica.



Obviamente se suele aplicar sobre elementos que visualizan información en modo texto, párrafos, áreas de texto, etc.

El atributo puede tener cuatro valores, ninguno “”, verdadero (“true”), siendo estos últimos de resultados idénticos, es decir da igual aplicar ninguno que verdadero, también dispone de falso (“false”), y por ultimo heredado (“inherit”), que recogerá el valor del elemento padre.

La sintaxis del atributo es la siguiente:

<p contenteditable=”valor”>Texto del párrafo</p>

El siguiente ejemplo muestra el uso del atributo en un documento web.

<!DOCTYPE HTML>
<html>
<head>
  <title>Ejercicios prácticos HTML5</title>
  <meta charset="utf-8">
  <meta name="author" content="José Sáez">
  <meta name="description" content="Ejercicios prácticos HTML5">
  <meta name="generator" content="Ejercicios prácticos HTML5">
  <meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5">
</head>
<body>
<p contenteditable="false">Este párrafo no se puede editar.</p>
<p contenteditable="">Este párrafo si se puede editar.</p>
<p contenteditable="true">Otro párrafo editable.</p>
</body>
</html>

El resultado del ejercicio anterior ha de ser similar al que se muestra en la imagen siguiente.

Atributos HTML5 - contenteditable

Atributos HTML5 – contenteditable

Gracias por vuestra visita y un saludo!!!