[jQuery] Effetto sui campi input

**echoweb** · 15-10-2009, 17:18

Ciao a tutti,

in jQuery ho scritto due righe di codice, per far in modo che quando ho il focus su un campo input text, questo venga colorato internamente di grigio.

Codice PHP:


    $(":text").bind("focus blur", function (event) {

        if (event.type == "focus") {

            $(this).css("border","1px solid #D8D8D8");

            $(this).css("background-color", "#EDEDED");

        } else {

            $(this).css("border","1px solid #7F9DB9");

            $(this).css("background","white");

        }

    });

La cosa funziona MA... ho notato che quando ho il focus nel campo input, questo diventa un po' più piccolo.

Cosa sto sbagliando??

PS: tutto funziona bene se ometto la parte che mette il bordo (però mi fa l'effetto "incassato").

**Senamion** · 15-10-2009, 17:42

Evidentemente normalmente hai un bordo più grande, prova a mettere 2px e vedi se ti fa lo stesso effetto

**echoweb** · 16-10-2009, 08:42

Ciao Senamion,

ho controllato i bordi, e sia in partenza che dopo il click, sembrano rimanere uguali.
Ho provato a mettere 2px, ma quando clicco, il bordo diventa troppo grande.

Ti posto il codice se eventualemente ci vuoi dare un'occhiata.

Codice PHP:


<!DOCTYPE html>

<html>

<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

$(function () {   

    $(":text").bind("focus blur", function (event) {

        if (event.type == "focus") {

            $(this).css("border","1px solid #D8D8D8");

            $(this).css("background-color", "#EDEDED");

        } else {

            $(this).css("border","1px solid #7F9DB9");

            $(this).css("background-color","white");

        }

    });

});

</script>

</head>

<body style="font-size:62.5%;">



<input type='text' id='a1' />


<input type='text' id='a2' />


<input type='text' id='a3' />


<input type='text' id='a4' />


<input type='text' id='a5' />




</body>

</html>

Nel css io vado a cambiare il border e il background: forse bisogna aggiungere qualche altro parametro?

**Senamion** · 16-10-2009, 09:16

ho provato e in effetti non riesco a spiegarmelo. C'è un vecchio errore di jquery che però sembra stato risolto, magari è tornato.
Io uso una classe CSS (che dal punto di vista logico è anche meglio) così:

codice:

$(":text").focus(function () {
	$(this).addClass("highLightInput");	
});
$(":text").blur(function () {
	$(this).removeClass("highLightInput");
});

Basta che nel tuo CSS metti una classe highLightInput

.highLightInput {
...
}

**echoweb** · 16-10-2009, 09:38

Dal punto di vista logico hai ragione tu: è meglio usare addClass e removeClass (e poi così, lo script è anche più pulito).

Ho provato ad usare il codice che mi hai postato, e quando clicco sul campo text, questo viene ridimensionato, e quando esco dal campo, ritorna normale.

Bho, non riesco a capire come mai...

A questo punto, per risolvere questo "bug" al posto di fare removeClass, faccio un addClass di una classe di default, ovvero quando l'input text non è selezionata.

Grazie per l'aiuto Senamion

**Senamion** · 16-10-2009, 09:54

Il problema è proprio nei campi di input, anche senza jquery se uno dei tuoi ci metti style="border: 1px sold red" vedrai che te lo rimpicciolisce.
Quindi devi dargli una classe prima e poi settargliela con il jquery che ti ho postato.

Discussione: [jQuery] Effetto sui campi input

Strumenti discussione

Ricerca discussione

Visualizza

[jQuery] Effetto sui campi input

Permessi di invio