Martedì, 13 Novembre 2018 16:40

Esempio 04 - Eventi Focus e Blur

Scritto da

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>
Letto 373 volte
Prof. Alfredo Centinaro

Docente di "Scienze e tecnologie informatiche", "Tecnologie e progettazione di sistemi informatici", "Sistemi e Reti" presso IIS Alessandrini-Marino (Teramo), consulente e sviluppatore web. Ha collaborato per anni come sviluppatore presso MHT (ora Engineering 365), assistente Sistemi ed elaborazione dell'informazione in UniTE Corso di laurea in Scienze del turismo culturale, tutor presso Telecom Italia Learning Services (L'Aquila)