In questa lezione esaminiamo eventi utili per rilevare l’interazione dell’utente con alcuni elementi del DOM. In particolare vediamo:
Evento | Nome in addEventListener | Quando si attiva |
---|---|---|
onFocus | focus |
Questo handler si attiva quando l’utente entra in un campo ed è l’opposto di onBlur . |
onBlur | blur |
Attivato quando il puntatore del mouse o il cursore esce dalla finestra corrente utilizzando il mouse o il carattere TAB. Applicato ai moduli, invece, tale handler si avvia se si esce dal campo il cui tag contiene il controllo. |
onSelect | select |
Si attiva quando si effettua una selezione all’interno di una casella di testo sia col mouse sia tenendo premuto SHIFT e selezionando con i tasti freccia. |
Per provarne il funzionamento facciamo un esempio con focus e blur applicati ad una textarea:
Ogni volta che cliccheremo e interagiremo con la textarea vedremo la scritta "focus"
stampata in console, viceversa quando cliccheremo fuori dalla textarea in console sarà stampata la scritta "blur"
.
Ecco il codice:
<textarea id="focusArea" style="width:100%">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </textarea> <script> var txtArea = document.getElementById('focusArea'); txtArea.addEventListener('focus', function() { console.log('focus'); }); txtArea.addEventListener('blur', function() { console.log('blur'); }); </script>
Anche per select possiamo fare un esempio utilizzando una textarea di prova e vogliamo stampare in console il testo che viene selezionato nella textarea.
Una volta intercettato l'evento della selezione la questione sta tutta nell'ottenere il testo selezionato. Nei browser moderni (compreso IE>=9) utilizziamo il metodo window.getSelection():
<textarea id="selectArea">Sed ut perspiciatis...</textarea> <script> var txtArea = document.getElementById('selectArea'); txtArea.addEventListener('select', function(){ console.log(window.getSelection().toString()); }); </script>
Per intercettare anche il testo dei browser IE più datati possiamo utilizzare document.selection.createRange()
. Per avere un codice che funzioni al 100% possiamo sfruttare un polyfill o una soluzione come la seguente:
function GetSelectedText() {
if (window.getSelection) {
return window.getSelection().toString(); // tutti i browser, tranne IE<9
}
if (document.selection.createRange) { // IE<9
return document.selection.createRange().toString();
}
}
var txtArea = document.getElementById('selectArea');
txtArea.addEventListener('select', function(){ console.log(GetSelectedText()); });
Ecco un elenco dei tag cui si possono applicare gli handler:
Evento | Tag associati |
---|---|
onFocus onBlur |
Questo gestore è usato con i tag <select> e <textarea> e con il tag <input> di tipo text . Associato anche con i tag <body> e <frameset> e con il resto dei tag di form come <button> , <checkbox> , <fileupload> , <password> , <radio> , <reset> , <submit> . |
onSelect | Questo gestore è usato con il tag <textarea> e <input> di tipo text , anche per Internet Explorer. |
Se vuoi aggiornamenti su JavaScript inserisci la tua e-mail nel box qui sotto:
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Come creare applicazioni per il Web con PHP e MySQL per il DBMS.
Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.
I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.
Diventare degli esperti in tema di sicurezza delle applicazioni Java.
Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.
Le principali guide di HTML.it per diventare un esperto dei database NoSQL.
Ecco come i professionisti creano applicazioni per il Cloud con PHP.
Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.
Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.
Realizzare applicazioni per il Web utilizzando i framework PHP.
Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.
Fare gli eCommerce developer con Magento, Prestashop e WooCommerce.
Percorso base per avvicinarsi al web design con un occhio al mobile.
Realizzare siti Web e Web application con WordPress a livello professionale.
Una guida per iniziare i primi passi all’interno di Autodesk Maya, il software di riferimento per l’animazione e la modellazione 3D, impiegato come standard anche all’interno dell’industria dei videogiochi. La guida permetterà di conoscere i comandi base e iniziare a creare i primi asset spendibili all’interno di un gioco 3D.
HeidiSQL è un tool per gestire e amministrare i database. Può operare su database di vario, da MySQL a MariaDB, passando per PostgreSQL ed SQL Server.