In questa lezione esaminiamo eventi utili per rilevare l'interazione dell'utente con alcuni elementi del DOM. In particolare vediamo:
onFocus e onBlur
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"
"blur"
Ecco il codice:
onSelect
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()
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()); });Tag sensibili
Ecco un elenco dei tag cui si possono applicare gli handler:
| 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
|
| Evento | Tag associati |
|---|---|
| onFocus
onBlur |
Questo gestore è usato con i tag <select>
<textarea>
<input>
text
<body>
<frameset>
<button>
<checkbox>
<fileupload>
<password>
<radio>
<reset>
<submit>
|
| onSelect | Questo gestore è usato con il tag <textarea>
<input>
text
|