Nelle lezioni precedenti, abbiamo visto quali sono gli eventi del browser, gli eventi della tastiera e gli eventi del mouse. Ora, vediamo quali sono e come funzionano gli eventi dei form in jQuery.
Nota: se non conosci i form, puoi leggere la lezione sui form HTML.
Vediamo la lista completa degli eventi dei form:
| Evento | Descrizione |
blur | Si verifica quando un elemento perde il focus. |
change | Si verifica quando il valore di un elemento cambia. |
focus | Si verifica quando un elemento ottiene il focus. |
focusin | Si verifica quando un elemento o uno dei suoi figli ottiene il focus. |
focusout | Si verifica quando un elemento o uno dei suoi figli perde il focus. |
select | Si verifica quando un utente seleziona il testo in un elemento di input. |
submit | Si verifica quando viene inviato un form. |
Vediamo gli eventi dei form in dettaglio.
L'evento "blur" si verifica quando un elemento perde il focus, di solito quando l'utente esce da un campo di input (quindi cliccando in un'area della pagina diversa). Utile per eseguire azioni quando l'utente ha terminato l'inserimento di dati.
Vediamo un esempio:
Email: <input type="text" id="input"><br>
<span style="color:red"></span>
<script>
$("#input").on("blur", function() {
var input = $("#input").val();
if(input.includes("@")==false){
$("span").text("Non hai inserito un'email valida");
}else{
$("span").text("");
}
});
</script>Nell'esempio, l'utente deve inserire la propria email e dobbiamo controllare che sia valida:
.val() per recuperare il contenuto del valore inserito nell'input (l'abbiamo visto nella lezione su come recuperare il contenuto degli elementi)..includes() per controllare che contenga la @. Puoi approfondire questo metodo nella lezione sui metodi delle stringhe di JavaScript.<span> utilizzando .text(), visto in questa lezione.L'evento "change" si verifica quando il valore di un elemento, come un campo di input, cambia. Utile per rilevare modifiche nei dati inseriti dall'utente.
Utilizziamo lo stesso esempio precedente:
Email: <input type="text" id="input"><br>
<span style="color:red"></span>
<script>
$("#input").on("change", function() {
var input = $("#input").val();
if(input.includes("@")==false){
$("span").text("Non hai inserito un'email valida");
}else{
$("span").text("");
}
});
</script>Questo script funziona allo stesso modo dell'esempio precedente.
Nota: l'evento "change" si attiva immediatamente con gli input di select, checkbox e radio button. Per gli altri input e le textarea, soltanto quando queste perdono il focus (quindi, lo stesso funzionamento dell'evento "blur"). Abbiamo parlato dei diversi tag dei form nella lezione HTML dedicata.
L'evento "focus" si verifica quando un elemento, come un campo di input, ottiene il focus.
Vediamo un esempio:
Cerca: <input type="text" style="padding:5px;width:150px;transition:.2s">
<script>
$("input").on("focus", function() {
$("input").css("width", "300px");
});
$("input").on("blur", function() {
$("input").css("width", "150px");
});
</script>Nell'esempio, quando l'utente clicca sull'input, la larghezza dell'input (width) cambia da 150px a 300px, grazie a .css() (che abbiamo visto nella lezione degli stili con jQuery). Con l'evento "blur" ritorna a 150px.
L'evento "focusin" è simile a "focus", ma si verifica anche quando un figlio dell'elemento ottiene il focus. Utile per monitorare i cambiamenti di focus all'interno di un elemento più grande.
<div id="contenitore">
<input type="text" id="input">
</div>
<script>
$("#contenitore").on("focusin", function() {
console.log("L'elemento o uno dei suoi figli ha ottenuto il focus");
});
</script>Nell'esempio, compare una scritta con console.log() ogni volta che si clicca sull'input.
L'evento "focusout" è simile a "blur", ma si verifica anche quando un figlio dell'elemento perde il focus. Può essere utilizzato per gestire la perdita di focus da parte di qualsiasi elemento interno.
Vediamo un esempio:
<div id="contenitore">
<input type="text" id="input">
</div>
<script>
$("#contenitore").on("focusout", function() {
console.log("L'elemento o uno dei suoi figli ha perso il focus");
});
</script>L'evento "select" si verifica quando un utente seleziona il testo all'interno di un elemento di input o textarea. Utile per rilevare quando l'utente interagisce con il testo all'interno di un campo.
Ecco un esempio di questo evento:
<input type="text" id="campoInput" value="Seleziona questo testo">
<p style="display:none;">Hai selezionato un testo</p>
<script>
$("#campoInput").on("select", function() {
$("p").show().fadeOut(1000);
});
</script>Nell'esempio, quando l'utente seleziona del testo all'interno dell'input, viene reso visibile l'elemento <p> tramite il metodo .show() e poi nascosto con dissolvenza con il metodo .fadeOut() (li abbiamo visti nelle lezioni Mostrare e nascondere elementi e Dissolvenza degli elementi).
L'evento "submit" si verifica quando viene inviato un form, facendo click su un pulsante type="submit" all'interno del form. È utile per eseguire azioni prima dell'invio effettivo del modulo.
<form id="form">
<input type="text" name="campoInput" value="Un testo di esempio">
<input type="submit" value="Invia">
</form>
<script>
$("#form").on("submit", function(event) {
alert("Il modulo è stato inviato");
event.preventDefault(); // Impedisce l'invio effettivo del form
// Altre funzioni o controlli...
});
</script>