Jquery: come evidenziare campo testo

Uno degli effetti classici che ritroviamo nella formattazione dei moduli, consiste nel cambiare stile del campo di input testo attivo, ovvero cliccato dall'utente.

Con jquery si tratta di un'operazione assai semplice.

Prima di tutto definiamo lo stile da applicare al focus del campo, dunque nel nostro CSS inseriamo la classe

.focus {

border: 1px solid red;

background-color: #e7e7e7;

}

Dopo aver fatto la classica chiamata alla libreria Jquery più aggiornata, come descritto in questo articolo, definiamo la function che applica la classe al focus e la disattiva al blur

$(document).ready(function() {
    
$('INPUT[type="text"]').focus(function() {
$(this).addClass("focus");
});

$('INPUT[type="text"]').blur(function() {
$(this).removeClass("focus");
});


});

e infine costruiamo in html il modulo

    ‹form id="nome-form"›
    

    ‹input type="text" /›    
    

    ‹/form›