Esempio 04 – Eventi Focus e Blur

Un esempio un po’ più complesso questa volta con gli eventi fratelli focus e blur. Il loro utilizzo ha senso con i campi di input delle form HTML. Provate a cliccare dentro la casellina, questa cambierà di colore grazie alla funzione css che modifica il colore in grigio e lo riporta a bianco se si clicca in altro punto dello schermo.

Nell’esempio abbiamo inserito per la prima volta due funzioni che agiscono sul selettore input e in più il selettore $(this) che ci indica il selettore che lo ha chiamato con l’azione css(…) che al contrario del getDocumentById().style.* ha la sintassi pressochè uguale a quella del file css, senza strani errori di maiuscole e minuscole da scrivere  

<!DOCTYPE html>
<html lang="it">
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
    $("input").focus(function(){
        $(this).css("background-color", "light-orange");
    });
    $("input").blur(function(){
        $(this).css("background-color", "#ffffff");
    });
});
</script>
</head>
<body>

Nome: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">

</body>
</html>

Ultima modifica 17 Gennaio 2024