La proprietà designMode in Javascript
Nel linguaggio Javascript la proprietà designMode mi permette di rendere editabile o no l'intero contenuto della pagina.
designMode
E' una proprietà dell'oggetto document .
Quando è impostata su "on", rende l'intero contenuto del documento modificabile e ogni elemento della pagina web è editabile come in un editor di testo.
Si tratta di una caratteristica interattiva fornita dai browser che consente di modificare i contenuti delle pagine web direttamente dal browser, senza dover modificare il codice sorgente HTML o CSS. È particolarmente utile per testare rapidamente modifiche al contenuto o per creare editor di testo basati sul web.
Per utilizzare designMode, devo semplicemente impostare la proprietà document.designMode su "on".
document.designMode = "on";
Una volta fatto, posso iniziare a modificare qualsiasi testo visibile sulla pagina.
Per tornare alla modalità non modificabile, basta impostare designMode su "off".
document.designMode = "off";
Ad esempio, questa pagina web è composta da un paragrafo di testo e un paio di pulsanti: uno per abilitare la modalità di modifica e uno per disabilitarla.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document Design Mode Demo</title>
</head>
<body>
<p>Questo è un testo modificabile. Clicca su "Abilita Modifica" per modificare questo testo.</p>
<button onclick="abilitaModifica()">Abilita Modifica</button>
<button onclick="disabilitaModifica()">Disabilita Modifica</button>
<script>
function abilitaModifica() {
document.designMode = "on";
console.log("Modalità modifica abilitata.");
}
function disabilitaModifica() {
document.designMode = "off";
console.log("Modalità modifica disabilitata.");
}
</script>
</body>
</html>
Quando clicco su "Abilita Modifica", il testo della pagina web diventa modificabile in ogni parte.
Viceversa, cliccando su "Disabilita Modifica", la pagina torna alla modalità non modificabile, quella di default dei browser.
Nota. Ovviamente, le modifiche apportate tramite "designMode" sono temporanee. Se la pagina viene ricaricata, tutte le modifiche andranno perse, a meno che non implemento un meccanismo per salvare e ripristinare lo stato del documento.
E così via.
