Aprenda a configurar el contenido de la página web como editable para los visitantes del sitio

Hacer que el texto en un sitio web sea editable por los usuarios es más fácil de lo que cabría esperar. HTML proporciona un atributo para este propósito: contentable.

El atributo contendible se introdujo por primera vez en 2014 con el lanzamiento de HTML5. Especifica si el contenido que gobierna puede ser cambiado por un visitante del sitio desde el navegador.& amp; amp; nbsp;

Video destacado

Soporte para el atributo contentable

La mayoría de los navegadores de escritorio modernos admiten el atributo. Estos incluyen:

• Chrome 4.0 y superior
• Internet Explorer 6 y superior
• Firefox 3.5 y superior
• Safari 3.1 y arriba
• Opera 10.1 y arriba
• Microsoft Edge

Lo mismo ocurre con la mayoría de los navegadores móviles también.

Cómo usar Contentable

Simplemente agregue el atributo al elemento HTML que desea que sea editable. Tiene tres valores posibles: & amp; amp; nbsp; verdadero, falso y heredado. Heredar es el valor predeterminado, lo que significa que el elemento adquiere el valor de su padre. Del mismo modo, cualquier elemento secundario de su contenido recientemente editable también será editable a menos que cambie sus valores a falsos. Por ejemplo, para hacer editable un elemento DIV, use:

& lt; pre / & gt ;

Cree una lista de tareas pendientes editable con contenido

El contenido editable tiene más sentido cuando lo empareja con almacenamiento local, por lo que el contenido persiste entre sesiones y visitas al sitio.

1. Abra su página en un editor HTML.& amp; amp; nbsp ;
   1. Cree una lista con viñetas y sin orden llamada myTasks : & lt; pre / & gt ;
      • Alguna tarea
      • & lt; pre / & gt ;
      • Otra tarea
      • & lt; pre / & gt ;

Agregue el atributo & amp; amp; nbsp; contentable & amp; nbsp; atribute a & amp; amp; nbsp;

• & amp; amp; nbsp; element:

& lt; p / & gt ;

Ahora tiene una lista de tareas pendientes que es editable & amp; # x2014; pero si cierra su navegador o abandona la página, su lista desaparecerá. La solución: agregue un script simple para guardar las tareas en localStorage.

Agregue un enlace a jQuery en el

Este ejemplo usa el CDN de Google, pero puede alojarlo usted mismo o usar otro CDN si lo prefiere.

En la parte inferior de su página, justo encima de & amp; amp; nbsp; & amp; amp; nbsp; tag, agregue su script:

& lt; pre & gt;}) ;
& lt; / pre & gt ;

Dentro de la función document.ready, agregue su script para cargar las tareas en localStorage y obtenga cualquier tarea que se guardó allí anteriormente:

1. 1. & lt; pre & gt; localStorage.setItem (& amp; apos; myTasksData & amp; apos ;, this.innerHTML); // guardar en localStorage & lt; / pre & gt ;
   2. & lt; pre & gt; }); & lt; / pre & gt ;
   3. & lt; pre & gt; if (localStorage.getItem (& amp; apos; myTasksData & amp; apos;)) {// si hay contenido en el almacenamiento local & lt; / pre & gt ;
   4. & lt; pre & gt; $ (& amp; quot; # myTasks & amp; quot;) .html (localStorage.getItem (& amp; apos; myTasksData & amp; apos;)); // poner contenido en la página & lt; / pre & gt;
   5. & lt; pre & gt; } & lt; / pre & gt ;
   6. & lt; pre & gt; & amp; amp; nbsp;}); & lt; / pre & gt ;

El HTML para toda la página se ve así:

& lt; pre & gt; & lt; br / & gt ;
& lt; / pre & gt ;
& lt; br & gt ;
& lt; br & gt ;
& lt; br & gt ;
& lt; br & gt ;
& lt; br & gt ;
& lt; br & gt ;
& lt; br & gt ;
Mis tareas
& lt; br & gt ;

Ingrese los elementos para su lista. El navegador lo almacenará para usted, de modo que cuando vuelva a abrir su navegador, todavía estará aquí.

& lt; br & gt ;

• Alguna tarea
• Otra tarea & lt; pre / & gt ;

& lt; br & gt ;
& lt; br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;

& amp; # x203A; Informática