HTML5 introduce la possibilità di modificare nativamente porzioni di pagina semplicemente impostando all'elemento contenitore l'attributo contentEditable="true".
Nell'esempio seguente è possibile, una volta visualizzata la pagina nel browser, cliccare sul secondo o sul terzo paragrafo di testo e modificarne il contenuto:
<!doctype html> <html> <head> <title>HTML5Italia.com</title> <style> p { padding: 10px; } p[contenteditable="true"] { border: 1px dashed #555; } p[contenteditable="true"]:hover { background: #ffffaa; } p[contenteditable="true"]:focus { background: #ffff55; } </style> </head> <body> <h1>Titolo principale</h2> <p>Questo non si può modificare</p> <p contenteditable="true">Questo sì: Lorem ipsum...</p> <p contenteditable="true">...e anche questo: Lorem ipsum...</p> <p>Invece quest'ultimo paragrafo non è modificabile</p> </body> </html>
Lo stile dichiarato consente di evidenziare le aree modificabili all'interno del documento (creando un bordo tratteggiato e impostando uno sfondo giallo chiaro al passaggio del mouse o giallo intenso in fase di editing).
Per consentire la modifica dell'intero documento è possibile utilizzare l'attributo designMode che accetta come valori on (il documento è modificabile) e off (il documento non è modificabile).
In questo modo diventa ad esempio molto semplice realizzare l'interfaccia di imputazione di un sistema di gestione dei contenuti (CMS): il contenuto può essere modificato direttamente nella pagina completa che lo contiene, valutando immediatamente il risultato finale (la logica di persistenza dei dati inseriti deve comunque essere implementata ad hoc, ad esempio inviando il testo aggiornato al server mediante AJAX).
Inoltre - utilizzando questi attributi in combinazione con le API per interagire con il documento (come document.execCommand) - diventa relativa semplice realizzare un editor evoluto di tipo WYSIWYG.
Tutti i principali browser supportano l'attributo contentEditable: Firefox 3.5+, Safari 3.1+ (5.0 su iOS), Opera 9+, Chrome e Internet Explorer 5.5+ sebbene le diverse implementazioni differiscano nelle modalità di editing di elementi specifici.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Escludere alcuni file da GitHub Secret Scanning
Rendere i propri workflow e le GitHub Action utilizzate più sicure
Gestione degli stili CSS con le regole @layer
Rendere le variabili read-only in una pipeline di Azure DevOps
Configurare lo startup di applicazioni server e client con .NET Aspire
Integrare SQL Server in un progetto .NET Aspire
Recuperare App Service cancellati su Azure
Eliminare una project wiki di Azure DevOps
Recuperare l'ultima versione di una release di GitHub
Utilizzare l'espressione if inline in una pipeline di Azure DevOps
Loggare le query più lente con Entity Framework
I più letti di oggi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Utilizzare il pattern matching per semplificare le espressioni
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Utilizzare requestAnimationFrame per animazioni fluide