Come usare contenteditable e execCommand()

Il codice HTML abbinato a JavaScript, consente agli sviluppatori di realizzare meravigliosi siti web e agli utenti di godere della migliore esperienza possibile.

Molti elementi HTML sono stati pensati appositamente per l’uso combinato con funzioni e metodi JavaScript, per riempire quei vuoti che molti programmatori hanno faticosamente riempito negli anni passati.

Una perfetta combinazione tra HTML e JavaScript la troviamo con l’utilizzo di elementi con attributo contenteditable e il metodo execCommand() JavaScript, utilizzati spesso per la realizzazione di contenuti editabili.

Usare contenteditable e execCommand() in una pagina web

In questo articolo ti spiegherò in dettaglio a cosa servono e come si usano “contenteditable” in abbinamento con execCommand(). Questi due “elementi” sono devono essere obbligatoriamente utilizzati insieme, ma spesso il loro scopo converge verso lo stesso obiettivo per la programmazione all’interno di una pagina web.

Cos’è contenteditable?

“contenteditable” è un semplice attributo HTML con valore booleano (vero/falso, true/false), che può anche essere omesso (equivale a true).

contenteditable (scomposto appunto “content“+”editable“) permette di trasformare un elemento statico in un elemento con contenuto modificabile. Questo significa che un utente, cliccando semplicemente sull’oggetto HTML con questo attributo (con valore true), potrà modificarne il testo a proprio piacimento.

Normalmente questo attributo viene definito in elementi HTML di input e nei tag div, trasformandoli in aree di testo (simili a textarea). Un esempio è quello visto nel precedente articolo come creare un editor di testo con HTML e JavaScript.

Tuttavia nulla vieta il suo utilizzo anche in tag HTML differenti.

L’effetto è identico alla proprietà designMode JavaScript, ma quest’ultimo interessa l’intero documento HTML; contro contenteditable che ha effetto solo sull’elemento in cui è dichiarato.

Cos’è execCommand?

execCommand è un metodo JavaScript che si utilizza per la modifica del contenuto di un elemento con attributo contenteditable, di un documento in designMode o di input predisposti.

execCommand() è pensato proprio per la modifica in-page del testo presente nei tag HTML.

Oramai questo metodo è deprecato e se ne sconsiglia l’utilizzo se non strettamente necessario, tuttavia resta utile per svariati motivi e per la sua semplicità di utilizzo.

Uso combinato

Da soli questi due elementi fanno ben poco. Una regione HTML con contenuto editabile è fine a sé stessa, viene convertita in un area testuale generica o predisposta ad altre operazioni. execCommand() invece consente di apportare modifiche di vario genere al testo interessato, come trasformarlo in grassetto, in corsivo, cambiare l’allineamento, copiare, tagliare e incollare e molto altro.

Dunque è facile immaginare che l’uso combinato dell’attributo HTML con il metodo JavaScript permetta di ottenere pagine più dinamiche e funzionali.

Ad esempio:

<p contenteditable>
  Hello world!
</p>
<button onclick="document.execCommand('bold')">
  Grassetto
</button>

Prova l’esempio in alto: Scrivi all’interno del paragrafo liberamente, seleziona il testo e clicca sul pulsante “Grassetto”.

Questo sistema di scrittura in-page può essere applicato in diversi elementi HTML. Con execCommand() puoi fare molto di più con i differenti parametri esistenti. Puoi trovare più informazioni qui.

Articoli recenti:

• Upgrade Scheda Rete. Sostituzione della Realtek RTL8822CE
• Da jQuery a JavaScript Puro: Sfruttare il Potenziale Nativo del Web
• Come Risolvere i Problemi di Connessione Bluetooth al PC
• Guida alla Cybersecurity: Come proteggerti da minacce informatiche
• Come Aggiungere un Dizionario su App Kindle