Esempio 04 – Eventi Focus e Blur

di

Un esempio un po’ più complesso questa volta con gli eventi fratelli focus e blur che hanno senso ed uso con i campi delle form. Provate a cliccare dentro la casellina, questa cambierà di colore grazie alla funzione css che modifica il colore in grigetto o 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>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.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 3 Aprile 2022

Visite: 78