disign | Jquery: come evidenziare campo testo | a digital sign for a best design!
A digital sign for a best design

Articolo stampato da http://disign.improntedigitali.it/jquery-come-evidenziare-campo-testo-473-2-1.html

© Luca Frassineti

Programmazione 8.067 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›

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 


Questo sito è totalmente privo di pubblicità, se volete sostenere questa inziativa, potete scegliere di fare una piccola donazione libera:


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