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