Corsi on-line

Utilizzare l’attributo contenteditable di HTML5

L’attributo contenteditable è stato introdotto con HTML5 per specificare se un determinato contenuto è editabile o meno, come è facile intuire esso è stato concepito per introdurre una funzionalità di tipo WYSIWYG (What You See Is What You Get, cioè “Quello che vedi è ciò che ottieni”) nella user experience di chi accede alle pagine Internet.

HTML5contenteditable rende sostanzialmente modificabile un’area, delimitata per esempio tramite una divbox, una paragrafazione o una tabella, tramite un click (o un tap nel caso dei dispositivi mobili) su di essa.

Nello specifico parliamo di un attributo di tipo booleano che accetta soltanto due tipologie di parametri: TRUE (contenuto editabile) o FALSE (contenuto non editabile): questa configurazione consente a contenteditable di acquisire tre stati differenti; il primo, cioè quello relativo all’editabilità del contenuto potrebbe essere indicato attraverso il seguente esempio:

<p contenteditable="true">Paragrafo editabile.</p>

oppure attraverso la forma seguente:

<p contenteditable="">Paragrafo editabile.</p>

La non editabilità del contenuto delimitato, secondo stato acquisibile, potrebbe essere invece esemplificata dallo snippet proposto di seguito, anch’esso delimitato da una paragrafazione:

<p contenteditable="false">Paragrafo editabile.</p>

Il terzo stato (che è poi quello di default) riguarda l’ereditarietà, esemplificabile tramite il valore inherit, attraverso la quale viene indicato che un elemento è editabile se un ulteriore elemento genitore (parent) è a sua volta editabile.

In sostanza, quando si aggiunge l’attributo contenteditable ad un elemento, sarà il browser stesso a rendere editabile quest’ultimo; inoltre, qualsiasi elemento figlio (children), ad esempio un paragrafo a sua volta contenuto in una divbox, diventerà editabile se il parent è editabile, a meno che per esso non venga introdotto esplicitamente un contenteditable="false" per impedirne la modifica.

Post correlati
I più letti del mese
Tematiche