HTML.it logo
Learn
  • Design
    • Grafica
    • User Interface Design
    • Adobe Creative Suite
    Guide
    Approfondimenti
    Faq
    Notizie
    Tutto in Design >
  • Development
    • .NET
    • ASP
    • CMS
    • Flash
    • Java
    • JavaScript
    • PHP
    • Essentials
    • Ruby
    • XML
    • Editor
    • CSS
    • HTML
    Guide
    Approfondimenti
    Script
    Faq
    Notizie
    Tutto in Development >
  • Mobile
    • Android Studio
    • Cordova
    • Eclipse
    • Objective C
    • Swift
    Guide
    Approfondimenti
    Script
    Faq
    Notizie
    Tutto in Mobile >
  • Server
    • Cloud
    • Database
    • OS
    • Sicurezza
    • Network
    Tutto in Server >
  • Digital Marketing
    • SEO
    • Affiliate Marketing
    • Social Media Marketing
    Tutto in Digital Marketing >
  • Makers
    • Arduino
    • RaspberryPi
    • Stampa 3D
    Guide
    Approfondimenti
    Notizie
    Tutto in Makers >
  • Game Design
    • Unity
    Guide
    Approfondimenti
    Notizie
    Tutto in Game Design >
Download
  • Audio e Video
    • Player Audio Video
    • Codec audio
    • Editor audio video
    • Masterizzazione
    • Ripper e Convertitori
    • Speech
    Tutto in Audio e Video >
  • Educazione
    • Bambini
    • Cucina
    • Salute e Benessere
    • Istruzione
    Tutto in Educazione >
  • Giochi
    • Arcade
    • Avventura
    • Azione
    • Board
    • Carte
    • Giochi di ruolo
    • Giochi Online
    • Puzzle e Enigmistica
    • Simulazione
    • Sparatutto
    • Sport
    • Strategia e Giochi di Guerra
    • Tempo Libero
    Tutto in Giochi >
  • Grafica
    • Accessori & Mappe
    • Animazione
    • CAD – 3D
    • Cattura schermo
    • Convertitori e ridimensionatori
    • Editor
    • Flash
    • Font
    • Fotoritocco
    • Gallerie e album
    • Icone e loghi
    • Visualizzatori
    Tutto in Grafica >
  • Internet
    • Browser
    • Chat e IM
    • eMail
    • Estensioni & Temi
    • FTP
    • Network
    • News e RSS
    • Peer to Peer
    • Webcam
    Tutto in Internet >
  • Programmazione
    • Accessori
    • CMS e E-Commerce
    • Editor e Compilatori
    • Editor e strumenti Web
    • Linguaggi
    Tutto in Programmazione >
  • Sicurezza
    • Antispam
    • Antispyware
    • Antivirus
    • Server
    Tutto in Sicurezza >
  • Produttività
    • Backup
    • Compressione
    • Connettività
    • Database
    • Fax e Telefonia
    • Gestione disco
    • Ottimizzazione
    • Ufficio
    • Utilità di Sistema
    Tutto in Produttività >
Notizie
Video
Forum
in  
Trend
JavaScriptPHPHTMLLinguaggio CPythonDigital MarketingProgrammazioneWordPressJavaGame Design
INDICE DELLA GUIDA
Primi passi con JavaScript
  1. 1 Introduzione a JavaScript

  2. 2 Gli strumenti di lavoro

  3. 3 ECMAScript 6 e il supporto dei browser

  4. 4 JS e HTML, librerie e codice JavaScript esterno

Gli elementi di base del linguaggio
  1. 5 Commenti, punti e virgola e maiuscole

  2. 6 Stringhe, numeri e altri tipi di dati JavaScript

  3. 7 Variabili, costanti e dichiarazioni

  4. 8 Espressioni e operatori

  5. 9 Conversioni tra tipi di variabili

  6. 10 Definire Array in JavaScript

Controllo di flusso
  1. 11 If, istruzioni condizionali e blocchi di codice

  2. 12 If-else e switch-case, combinare più condizioni

  3. 13 While e do-while, le iterazioni base

  4. 14 I cicli for

  5. 15 Break e continue

Introduzione alle funzioni
  1. 16 Funzioni in JavaScript: i fondamentali

  2. 17 Variabili globali e locali: lo scope

  3. 18 Funzioni predefinite

Introduzione a oggetti e API native di JavaScript
  1. 19 Oggetti JavaScript: proprietà, metodi, this

  2. 20 Object, oggetti, riferimenti e tipi primitivi

  3. 21 Number, l'oggetto per rappresentare i numeri

  4. 22 Math, funzioni matematiche in JavaScript

  5. 23 Stringhe in JavaScript, l'oggetto String

  6. 24 Template String

  7. 25 RegExp e le espressioni regolari

  8. 26 Date e orari con JavaScript

  9. 27 Array in JavaScript, l'oggetto e i metodi built-in

  10. 28 Typed Array, Map e Set

Funzioni: aspetti avanzati
  1. 29 Funzioni anonime e oggetti "first-class"

  2. 30 Callback

  3. 31 Funzioni che restituiscono funzioni

  4. 32 L'oggetto this e il contesto di esecuzione

  5. 33 Clousure e scope

  6. 34 Arrow function

Oggetti e OOP in JavaScript
  1. 35 Gli oggetti in JavaScript

  2. 36 Costruttori, creare oggetti in JavaScript

  3. 37 Prototipi ed ereditarietà

  4. 38 Creare oggetti con Object.create()

  5. 39 Prototipi e classi

  6. 40 Reflection in JavaScript

  7. 41 L'oggetto Reflect

  8. 42 La classe Proxy

  9. 43 Symbol

  10. 44 Utilizzare il tipo Symbol

  11. 45 Serializzare gli oggetti in JavaScript

  12. 46 Principi OOP in JavaScript

  13. 47 Gestione delle eccezioni

Design Pattern
  1. 48 Design Pattern in JavaScript

  2. 49 Singleton Pattern

  3. 50 Factory Pattern

  4. 51 Module Pattern

  5. 52 Moduli

  6. 53 Adapter e Façade Pattern

  7. 54 MVC/MVVM Pattern

  8. 55 Observer Pattern in JavaScript

  9. 56 Il pattern Promise per le operazioni asincrone

  1. 57 Decorator

Browser API
  1. 58 Browser API, l'oggetto window

  2. 59 Window, gestire lo schermo del device

  3. 60 Creare pop-up e finestre di dialogo

  4. 61 Gestione dei timer, setInterval e setTimeout

  5. 62 Controllo della navigazione: history e location

  6. 63 Informazioni sul browser, l'oggetto navigator

Document Object Model API
  1. 64 DOM, Document Object Model

  2. 65 getElementById e querySelector, selezionare gli elementi del DOM

  3. 66 Modificare gli elementi del DOM

  4. 67 Navigare i nodi del DOM

  5. 68 DOM, aggiungere e rimuovere elementi

Eventi
  1. 69 Eventi del DOM (browser e device)

  2. 70 L'oggetto event e this

  3. 71 Il flusso di propagazione degli eventi nel DOM

  4. 72 Load, scroll e resize: eventi di "interfaccia"

  5. 73 Dal click al MouseEvent: l'interazione con il mouse

  6. 74 Drag and drop

  7. 75 Eventi della tastiera

  8. 76 Mutation observer e mutation event

Form, UI e gestione dei dati
  1. 77 Form e dati della UI

  2. 78 Controlli e valori

  3. 79 Inizializzare un form, default e reset

  4. 80 Validare un form in JavaScript

  5. 81 Invio ed elaborazione dei dati di un form

Image API
  1. 82 Gestire le immagini: l'oggetto Image

  2. 83 Le immagini SVG

  3. 84 Canvas API

Concorrenza in JavaScript
  1. 85 Concorrenza in JavaScript, l'event loop

  2. 86 Input-Output non bloccante

  3. 87 Web worker

  4. 88 Shared Worker

  5. 89 Funzioni asincrone con async/await

API di comunicazione
  1. 90 Ajax e JavaScript

  2. 91 Fetch API

  3. 92 Server-Sent Events (EventSource)

  4. 93 WebSocket

Promise
  1. 94 Promise native

  2. 95 Combinazioni di promise, all e race

Mobile Device API
  1. 96 Device orientation API

  2. 97 Geolocation API

  3. 98 Touch API

Storage API
  1. 99 Web Storage API

  2. 100 Indexed Database API

File API
  1. 101 Accesso ai file

  2. 102 L'oggetto FileReader

  3. 103 I Blob

Appendici
  1. 104 onChange e onreadystatechange

  2. lezione
    105 di 112

    onFocus, onBlur e onSelect

  3. 106 Intersection Observer: gestire la visibilità degli elementi

  4. 107 Proxy API

Edizione precedente (2006)
  1. 108 Eventi da tasti particolari

  2. 109 Caratteri speciali

  3. 110 Parole chiave

  4. 111 Lifetime dei dati

  5. 112 Precedenza degli operatori

  • Learn
  • Guida JavaScript
  • onFocus, onBlur e onSelect
lezione
105 di 112

onFocus, onBlur e onSelect

  • di Andrea Marzilli
  • 17 Marzo 2015

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.

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" 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.


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:

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:

Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi:

106 / 112

Intersection Observer: gestire la visibilità degli elementi

Ultime notizie

ThisPersonDoesNotExist: generatore automatico di volti realistici

Microsoft: disattivare Windows Defender non risolve i problemi di WSL

Python 3.8 su Fedora 31?

Copyright: cosa prevede (veramente) la Direttiva

Red Hat: basta con MongoDB, largo a PostgreSQL

I Video di HTML.it

Carosello di immagini con Twitter Bootstrap – parte 1

Percorsi formativi correlati
Android Mobile Developer

Android Mobile Developer

5
guide
250 ore

Tutti i linguaggi per diventare uno sviluppatore di app per Android.

DB Administrator

DB Administrator

4
guide
80 ore

Come creare applicazioni per il Web con PHP e MySQL per il DBMS.

iOS Mobile Developer

iOS Mobile Developer

4
guide
180 ore

Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.

Java Developer

Java Developer

7
guide
300 ore

I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.

Java Security Expert

Java Security Expert

5
guide
120 ore

Diventare degli esperti in tema di sicurezza delle applicazioni Java.

Maker

Maker

2
guide
50 ore

Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.

NoSQL DB Expert

NoSQL DB Expert

5
guide
200 ore

Le principali guide di HTML.it per diventare un esperto dei database NoSQL.

PHP Cloud Developer

PHP Cloud Developer

7
guide
80 ore

Ecco come i professionisti creano applicazioni per il Cloud con PHP.

PHP Developer

PHP Developer

5
guide
100 ore

Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.

PHP e JavaScript Developer

PHP e JavaScript Developer

6
guide
100 ore

Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.

PHP Framework Expert

PHP Framework Expert

6
guide
120 ore

Realizzare applicazioni per il Web utilizzando i framework PHP.

PHP SysAdmin

PHP SysAdmin

6
guide
80 ore

Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.

Sviluppare un eCommerce con PHP

Sviluppare un eCommerce con PHP

5
guide
120 ore

Fare gli eCommerce developer con Magento, Prestashop e WooCommerce.

Web &amp; Mobile Designer

Web & Mobile Designer

5
guide
300 ore

Percorso base per avvicinarsi al web design con un occhio al mobile.

WordPress Developer

WordPress Developer

5
guide
150 ore

Realizzare siti Web e Web application con WordPress a livello professionale.

Ti consigliamo anche

Autodesk Maya, creare modelli 3D per i videogiochi

  • 3 Lezioni
  • Facile

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.

  • Canva: guida alla grafica social
  • Gravit: biglietto di San Valentino con grafica vettoriale

HeidiSQL: amministrare un database in tutta comodità

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.

  • SQL: sempre lo stesso, sempre utile
  • MySQL: gestione semplificata con Sequel Pro

ThisPersonDoesNotExist: generatore automatico di volti realistici

Microsoft: disattivare Windows Defender non risolve i problemi di WSL

Python 3.8 su Fedora 31?

  • Guide
  • Approfondimenti
  • Script
  • Q&A
  • Software
  • Tutorial
  • Videogiochi
  • Tag Software
  • News
  • Video
  • Forum
  • Chi siamo
  • Pubblicità
  • Contatti
  • Cookie policy
  • Privacy policy
  • Privacy Policy Newsletter
© HTML.it 1997-2019 | Triboo Media – P. IVA 06933670967 | HTML.it è un periodico telematico reg. Trib. Roma n. 309/2008 | 2.9.5