onfocus/onblur

[monnik100]

Beste,

Ik heb een formulier in html. Daar zitten een aantal invoer velden in (input type="text"). Ik wil graag dat de achtergrond kleur veranderd als de gebruiker zo'n tekst box aanklikt, en ook als er iets veranderd in de tekst box. Ik gebruik daarvoor een javascript:

function highlight() {
var elements = document.getElementsByTagName("input");
  for (i=0; i < elements.length; i++) {

     if(elements[i].getAttribute('type')=="text") {
       elements[i].onfocus=function() {
         this.style.borderColor='#5789C6';
         this.style.backgroundColor='#F7FB05';
       };
       elements[i].onchange=function() {
         this.style.borderColor='#AABBCC';
         this.style.backgroundColor='#F60202';
      };
		
    }
  }
}

window.onload = highlight;

Deze werkt uitstekend. Echter, ook als er niets veranderd is in het veld blijft deze een andere kleur hebben. Graag wil ik dat als er niets veranderd in het veld de originele kleur blijft behouden.

Iemand een idee??

 

[owenary]

als ik jou was zou ik dan zoiets doen

var ellementsValues = new Array();

function highlight() {
  var elements = document.getElementsByTagName("input");

  for (i=0; i < elements.length; i++) {
     elementsValues[elements[i]] = elements[i].value;
     if(elements[i].getAttribute('type')=="text") {
       elements[i].onfocus=function() {
         this.style.borderColor='#5789C6';
         this.style.backgroundColor='#F7FB05';
       };
       elements[i].onblur=function() {
         if(elementsValues[this]==this.value){
            //te doen als de tekst niet verandert is
        }else{
           //te doen als de tekst wel verandert is
        }
      }
    }
  }
}

window.onload = highlight;

ik heb um niet getest.. dus kweet niet zeker of hij helemaal klopt
maar je begrijpt het idee denk ik wel

 

[Glest]

de kleur veranderen wanneer een text input de focus heeft kan gewoon via css:

input[type=text]:focus
{
  background-color: #000000;
}

Geen idee of IE dit ondersteund (het zou maar eens zo zijn) maar het is onderdeel van de CSS2 specificaties. Maarja, een andere kleur voor veranderde inhoudt zal wel met Javascript moeten dus dan kun je dit inderdaad net zo goed ook meteen met Javascript regelen.

 

[owenary]

de achtergrond met javascript veranderen is
ellement.style.backgroundColor = '#FFFFFF';