Adding onBlur/onFocus action to ALL elements?

[Nebulus]

Hey all. I'm working on some VERY big forms, and the user will easily
lose their location if they get distracted - which happens a lot with
the amount of phone traffic they get.

Anyway, I have a function like this:

function initForms(){
for(i = 0; i < document.forms.length; i++){
for(j = 0; j < document.forms.elements.length; j++){
el = document.forms.elements[j]
el.onFocus = fldBGChange;
el.onBlur = fldBGChange();
}
}
}

function fldBGChange(){
bgClr = this.style.backgroundColor;
if(bgClr == fldBlurBG || bgClr == '' || bgClr == null){
this.style.backgroundColor = 'yellow';
} else {
this.style.backgroundColor = 'white';
}
}

Now, the idea is that when a user focuses on a field, it turns the
background yellow. However, this doesn't actually happen. Is there any
way to normalize the onFocus and onBlur events as opposed to adding
them to each field? Thanks for your help!

 

[VK]

el.onFocus = fldBGChange;
el.onBlur = fldBGChange();

Event handlers (unlike HTML attributes) are case-sensitive and must be
in lowcase. You assign to event handler a function reference, not a
result of a function execution - thus no parenthesis.

el.onfocus = fldBGChange;
el.onblur = fldBGChange;

 

[ASM]

Nebulus a écrit :

Hey all. I'm working on some VERY big forms, and the user will easily
lose their location if they get distracted - which happens a lot with
the amount of phone traffic they get.

Anyway, I have a function like this:

function initForms(){
for(i = 0; i < document.forms.length; i++){
for(j = 0; j < document.forms.elements.length; j++){
el = document.forms.elements[j]

el.onFocus = function(){fldBGChange(this);}
el.onBlur = function(){fldBGChange(this);}

}
}
}

function fldBGChange(){

function fldBGChange(what){
bgClr = what.style.backgroundColor;
etc

Is there any
way to normalize the onFocus and onBlur events as opposed to adding
them to each field? Thanks for your help!

et pourquoi pas des CSS normales ?

or perhaps normal CSS won't work with IE Windows ?

<style type="text/css">
input { background: #ffc; color blue;}
input:hover { background: #ddd; color: maroon;}
input:focus { background: yellow; border: 3px solid red; color: red; }
</style>

the hover could not work with IE but does it with a lot of other browsers

 

[Lee]

Nebulus said:

Hey all. I'm working on some VERY big forms, and the user will easily
lose their location if they get distracted - which happens a lot with
the amount of phone traffic they get.

So break it into smaller forms, or design the form so that it's
easier to keep track of where you are. When I get distracted,
I often have to move my mouse.


--

 

[Nebulus]

I actually found the problem. I was using onFocus and onBlur instead of
the case correct: onfocus and onblur. It works perfectly now.