Ús de l'atribut contenteditable
Fer el text d'un lloc web editable pels usuaris és més fàcil del que podríeu esperar. HTML proporciona un atribut per a aquest propòsit: contenteditable.
L'atribut contenteditable es va introduir per primera vegada el 2014 amb l'alliberament d' HTML5 . Especifica si el visitant del lloc pot canviar el contingut que regeix des del navegador.
Suport per a l'atribut Contenteditable
La majoria dels navegadors d'escriptori moderns admeten l'atribut.
Això inclou:
- Crom 4.0 i superior
- Internet Explorer 6 o superior
- Firefox 3.5 o superior
- Safari 3.1 o superior
- Opera 10.1 o superior
- Microsoft Edge
El mateix passa amb la majoria dels navegadors mòbils.
Com s'utilitza Contenteditable
Simplement afegiu l'atribut a l'element HTML que voleu fer editable. Té tres valors possibles: veritable, fals i heretar. Heretat és el valor predeterminat, el que significa que l'element assumeix el valor del seu pare. De la mateixa manera, qualsevol element secundari del vostre nou contingut editable també serà editable tret que canvieu els seus valors a false. Per exemple, per editar un element DIV, utilitzeu:
Creeu una llista de tasques editables amb Contenteditable
El contingut editable té més sentit quan es vincula amb l'emmagatzematge local, de manera que el contingut persisteix entre sessions i visites al lloc.
- Obriu la pàgina en un editor HTML.
- Creeu una llista sense vincles anomenada myTasks :
- Alguna tasca
- Una altra tasca
- Alguna tasca
- Afegiu l'atribut contenteditable a l'element
- :
Ara teniu una llista de tasques que es pot editar, però si tanqueu el navegador o deixeu la pàgina, la vostra llista desapareixerà. La solució: afegiu un script senzill per desar les tasques a localStorage. - Afegiu un enllaç a jQuery al del document.