Hacer que el texto de un sitio web sea editable por los usuarios es más fácil de lo que se puede esperar. HTML proporciona un atributo para este propósito: contenteditable.
El atributo contenible 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.
Soporte para el Atributo Contenible
La mayoría de los navegadores de escritorio modernos soportan este atributo. Estos incluyen
- Chrome 4.0 y superiores
- Internet Explorer 6 y superior
- Firefox 3.5 y superiores
- Safari 3.1 y superiores
- Opera 10.1 y superiores
- Borde de Microsoft
Lo mismo ocurre con la mayoría de los navegadores móviles.
Cómo usar Contenteditable
Simplemente añada el atributo al elemento HTML que desea editar. Tiene tres valores posibles: verdadero, falso y hereditario. Inherit es el valor por defecto, lo que significa que el elemento toma el valor de su padre. Del mismo modo, cualquier elemento hijo de su nuevo contenido editable también será editable a menos que cambie sus valores a false. Por ejemplo, para hacer que un elemento DIV sea editable, use:
Crear una lista de tareas editables con Contenteditable
El contenido editable tiene más sentido cuando se combina con el almacenamiento local, por lo que el contenido persiste entre las sesiones y las visitas al sitio.
- Abra su página en un editor HTML.
- Crear una lista con viñetas y sin orden llamada myTasks
Some task
Añada el atributo contenible al elemento
- :
-
-
localStorage.setItem('myTasksData', this.innerHTML); // guardar en localStorage -
});
- if ( localStorage.getItem(‘myTasksData’)) { /// if there is content in the localStorage
- $(«#myTasks»).html(localStorage.getItem(‘myTasksData’)); // poner contenido en page
-
}
-
});
-
Ahora tiene una lista de cosas por hacer que se puede editar, pero si cierra el navegador o abandona la página, la lista desaparecerá. La solución: Añada un script simple para guardar las tareas en localStorage.
Añada un enlace a jQuery en el de su documento.
Este ejemplo utiliza la CDN de Google, pero puede alojarla usted mismo o utilizar otra CDN si lo prefiere.
En la parte inferior de su página, justo encima de la etiqueta , agregue su script:
}); Este es el inicio de la función jQuery document.ready y le dice al navegador que cargue este script después de que el documento se haya cargado completamente.
Dentro de la función document.ready, añada su script para cargar las tareas en localStorage y obtener las tareas que se hayan guardado allí previamente:
El HTML de toda la página se ve así:
â?ª â?ª â?ª â?ª#fefefe">font color="#fefefe "#fefefe "#fefefe
Subtítulos por aRGENTeaMwWw.Subs-Team.Tv P r e s e n t a.
Subtítulos por aRGENTeaMIntroduce los artículos de tu lista. El navegador lo almacenará por ti, así que cuando vuelvas a abrirlo, seguirá aquí.
Some task / i> / i>.Otra tarea
/ i> (documento).ready(function(){
)$(«#myTasks»).blur(function() {
localStorage.setItem(‘myTasksData’, this.innerHTML);
});
si ( localStorage.getItem(‘myTasksData’)) {
>$(«#myTasks»).html(localStorage.getItem(‘myTasksData’));
}
}); / i> / i> / i>.
