[javascript] colore di sfondo input text al focus

[dops]

ciao, devo cambiare il colore di sfondo di un campo di testo quando il cursore si posiziona all'interno di esso e devo ricambiarlo quando il cursore esce dal campo di testo.. qualcuno ha idea di come posso fare?

[Xinod]

se intendi al passaggio del mouse

<input type="text" onmouseover="this.style.backgroundColor='#00ff00'" onmouseout="this.style.backgroundColor='#ffffff'" />

se intendi quando il cursore è posizionato per compilare il campo

<input type="text" onfocus="this.style.backgroundColor='#00ff00'" onblur="this.style.backgroundColor='#ffffff'" />

ciao

[dops]

giusto...

[maxtn]

Posso aggiungerlo alla classe sotto? per non cambiare tutte le pagine php che contengono i campi:
<input type='text' class='testoform' name='codform' size='15' maxlength='10'>


<style type="text/css">
.testoform {
background: #ffffff;
border-width: 6;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 15px;
text-transform: uppercase;
}
</style>

[Xinod]

purtroppo no,
con i soli css potresti cambiare colore solo al passaggio e solo con i browser che supportano l' hover di elementi diversi da link
(i browser moderni e ie solo dalla, chiamiamola, versione 7)
ciao

[Xinod]

se puoi aggiungere un richiamo ad un javascript esterno puoi salvare questo in esterno.js
farà, dove possibile, tutto da solo

function changeColor(e,clss){
  if(!e) e=window.event;
  var src=(e.target) ? e.target: e.srcElement;
  if(src.className) src.className=clss;
}

function init(){
  if(document.getElementsByTagName){
    var inp=document.getElementsByTagName("INPUT");
    for(var k=0;k<inp.length;k++){
      if(inp[k].type=='text' && inp[k].className=='testoform'){
        _attachToEvent(inp[k], "mouseover", function(e){changeColor(e,'testoform_hover')});
        _attachToEvent(inp[k], "mouseout", function(e){changeColor(e,'testoform')});
      }
    }
  }
}

function _attachToEvent (obj, name, func) {
  name = name.toLowerCase();
  if(obj.addEventListener) obj.addEventListener(name, func, false);
  else if(obj.attachEvent) obj.attachEvent("on"+name, func);
}

_attachToEvent(window, "load", init);

aggiungendo la regola per la classe testoform_hover nel css

<style type="text/css">
.testoform, .testoform_hover { 
  background-color: #ffffff; 
  border-width: 6; 
  font-family: verdana, arial, helvetica, sans-serif; 
  font-size: 15px; 
  text-transform: uppercase; 
} 
.testoform_hover {
  background-color: #ff0000; 
}
</style>

P.s. nello script manca un controllo sul supporto del className da parte del browser in uso, sinceramente non saprei farlo senza provare su di un elemento che sicuramente ha una classe assegnata...