Usando o atributo Contenteditable
Facer que o texto dun sitio web editable polos usuarios sexa máis sinxelo do que se podería esperar. HTML proporciona un atributo para este fin: contenteditable.
O atributo contenteditable foi introducido por primeira vez en 2014 co lanzamento de HTML5 . Especifica se o contido que rexee pode ser modificado por un visitante do sitio desde o navegador.
Apoio ao atributo Contenteditable
A maioría dos navegadores de escritorio modernos admiten o atributo.
Estes inclúen:
- Chrome 4.0 e superior
- Internet Explorer 6 e superior
- Firefox 3.5 e superior
- Safari 3.1 e superior
- Opera 10.1 e superior
- Microsoft Edge
O mesmo serve para a maioría dos navegadores móbiles.
Como usar Contenteditable
Simplemente engada o atributo ao elemento HTML que quere facer editable. Ten tres valores posibles: verdadeiro, falso e herdar. Herdanza é o valor predeterminado, o que significa que o elemento toma o valor do seu pai. Do mesmo xeito, os elementos secundarios do teu contido novo editable tamén serán editables a menos que cambie os seus valores a falsos. Por exemplo, para facer editable un elemento DIV, use:
Crea unha lista de tarefas editables con Contenteditable
O contido editábel ten máis sentido cando se empareja con almacenamento local, polo que o contido persiste entre sesións e visitas ao sitio.
- Abra a páxina nun editor HTML.
- Crea unha lista con viñetas e non ordenadas que se chama myTasks :
- Algunha tarefa li>
- Outra tarefa li>
ul>
- Algunha tarefa li>
- Engade o atributo contenteditable ao elemento
- :
- Engade unha ligazón a jQuery no do teu documento.