onFocus, onBlur e onSelect

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:

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.

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>

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.

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.

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()); });

Tag sensibili

Ecco un elenco dei tag cui si possono applicare gli handler: