[Pillola]pseudoclassi :hover,:focus per IE(sui campi form )

[antos]

Premessa
come sappiamo IE non supporta le pseudoclassi :hover e :focus applicate in particolare ai campi del form, aggirare il problema ci sono diverse soluzioni, questa è quella ho fatto io :sexpulp, in particolare non viene aggiunto nessuno stile in linea, e sopratutto penso sia una soluzione davvero molto semplice
lo script è stato provato su IE4 e successivi.

cosa ci serve:
codice CSS su file esterno(consigliato) o interno
codice javascript

<style type="text/css">
/*codice css di esempio */
.txt{border:1px solid #7B8A94;color:#7B8A94;margin:2px;background-color:#EDEEF0;}
/*queste qui sono le pseudoclassi e fungono con mozilla & Co */
.txt:hover{border:1px solid #FF6600;}
.txt:focus{background-color:#FFFFFF;border:1px solid #FF0000;}

/*queste qui sono invece le classi create per ottenere lo stesso effetto anche con IE(notate il nome della classe)*/
.txtfocus{border:1px solid #FF0000;color:#000000;margin:2px;background-color:#FFFFFF;cursor:text;}
.txthover{border:1px solid #FF6600;color:#000000;margin:2px;background-color:#EDEEF0;}

</style>
<javascript type="text/javascript">
/*script by antos*/
//riconosciamo il browser

var agt=navigator.userAgent.toLowerCase();
var IE = agt.indexOf("msie")!=-1 && agt.indexOf("opera")==-1;

/*
 funzione per l'hover
 come per le altre funzioni non fa altro che cabiare la classe dell'elemento (X)HTML 
*/
function hover(obj){  
 if(IE){
       if (obj.className.indexOf("focus")== -1)
         obj.className= obj.className+"hover";		
  }
}

//funzione per il focus
function selezionato(obj){  
 if(IE){
       obj.className=obj.className.replace("hover","");
       obj.className= obj.className+"focus";	   
 } 
}
//funzione onmouseout ripristina la classe inziale
function notHover(obj){
  if(IE)
       obj.className=obj.className.replace("hover","");
}
//funzione onblur ripristina la classe inziale
function notFocus(obj){	
  if(IE)
       obj.className=obj.className.replace("focus","");
}
</script>
...

<input type="text" id="testo" class="txt" onfocus="selezionato(this);" onblur="notFocus(this);" onmouseout="notHover(this);" onmouseover="hover(this);" />
...

come funziona
in tutte le funzoni che vengono richiamate viene passato come paramentro l'oggetto che ha generato l'evento, e da qui ne viene recuperata la classe ed elaborata a seconda dei casi:
1)la funzione hover viene cotrollato l'oggetto ha la classe per il focus (txtfocus) e gli viene assegnata la classe per l'effetto hover (txthover)
2)la funzione focus fa l'inverso della prcedente,viene cotrollato l'oggetto ha la classe per l'hover e gli viene assegnata la classe per l'effetto focus
3)dal nome della classe viene cancellato la stringa "hover" ottendo così la classe di partenza (txt)
4)dal nome della classe viene cancellato la stringa "focus" ottendo così la classe di partenza (txt)

come avrete notato lo script per funzionare correttamente richiede che vengano dati i nomi alle classe seguendo queste "regole"
classe base: nomeclasse
classe per l'hover:nomeclassehover
classe per il focus:nomeclassefocus

[sms]

interessante ..
bravo

[antos]

Originariamente inviato da sms
interessante ..
bravo

grazie

[Marcolino's]

:hover funziona in IE perchè dici che non funziona?

ad esempio per accoppiare uno stile (hover) ad una campo di testo:

p.hover {
margin: 0;
width: 100px;
height: 25px; line-height: 25px;
background-color: #c0c0c0;
}
p.hover a { /* nota che a è parte di p e non di tutta la pagina*/
color: red;
text-decoration: none;
}
p.hover a:hover {
color: blue;
text-decoration: none;
}

e lo applichi così:
<p class='hover'>
testo da evidenziare
</p>

è un trucco e non è neppure carino, ma funziona e non usa il javascript sempre un po pericoloso da usarsi, perchè ad esempio su NN4 quello che hai fatto tu non funzionerebbe.

[antos]

con campo di testo intendo gli input box <inputtype="text" >
e per quello mi sa che devi usare per forza javascript
mentre con mozilla & co. basta fare input:hover,input:focus

l'esempio di codice che hai postato è uno dei tanti selettori css
per esempio funziona lo stesso se scrivi
p a:hover ma ti evidenzia solo il testo e non il paragrafo!

che non funziona su NN4 non lo so perchè non ho provato...l'ho provato su IE4 e andava, e comunque come si nota dalla titolo della pillola lo scipt è per sopperire alla carenza di IE
e sopratutto basta modificarlo ad hoc per avere anche la compatibilità con NN4

[Marcolino's]

è una carenza di IE ma lo è anche di NN4, cioè se ti fai tutta sta sudata per avere un'evidenzazione dei campi input su IE, tanto vale che pedali ancora un po e lo fai anche per NN4, ad ogni buon conto volevo solo dire che se per risolvere un "problema" di IE, devi usare tanto javascript allora vale la pena di lasciar perdere, come dire pesi pro e contro e poi vedi se conviene davvero. Tutto qui.

[antos]

Originariamente inviato da Marcolino's
è una carenza di IE ma lo è anche di NN4, cioè se ti fai tutta sta sudata per avere un'evidenzazione dei campi input su IE, tanto vale che pedali ancora un po e lo fai anche per NN4, ad ogni buon conto volevo solo dire che se per risolvere un "problema" di IE, devi usare tanto javascript allora vale la pena di lasciar perdere, come dire pesi pro e contro e poi vedi se conviene davvero. Tutto qui.

non l'ho fatto anche per NN4 perchè non lo usa + nessuno...la compatibilità con IE4 non l'ho cercata ma semplicemente lo script funziona anche su quello

[Dennis]

Ah! ecco il className a cosa serviva


complimenti, un bel metodino per aggirare il problem

[antos]

Originariamente inviato da Dennis
Ah! ecco il className a cosa serviva
complimenti, un bel metodino per aggirare il problem

esatto
ma esiste un sistema per sapere qual'è l'evento che ha lanciato la funzione, in modo da incorpare tutto in un unica function e chiamare una sola funzione