disign.it | Jquery: come evidenziare campo testo | a digital sign for a best design!
A digital sign for a best design
Programmazione 6.016 visualizzazioni

Jquery: come evidenziare campo testo

12/06/2013

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›

← Jquery: url e titolo corrente HTML5: spellcheck →

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 

© 2009 - 2017 Impronte digitali di Luca Frassineti. Tutti i diritti riservati.