Hi all,
I've got various bits of scripts from a number of places and created a piece of Javascript which unobtrusively places onFocus and onBlur events on text fields, I'd do this in CSS if it weren't for the fact IE doesn't support these. The trouble is, this Javascript doesn't work either (in IE6 and 7), yet its fine in FF(1.5 and 2.0) and Opera 9.

The code is as follows:

//Add Highlight
function highlightField() {this.className += ' highlightField';}
//Remove Highlight
function unhighlightField() {this.className = this.className.replace(/highlightField/g, "");}

//Unobtrusive JS focus/blur
function initHighlight() {
    if (!document.getElementsByTagName){ return; }
    var allfields = document.getElementsByTagName("input");

    // loop through all input tags and add events
    for (var i=0; i<allfields.length; i++){
        var field = allfields[i];
        if ((field.getAttribute("type") == "text") || (field.getAttribute("type") == "password") ) {
            addEvent(field, 'focus', highlightField);
            addEvent(field, 'blur', unhighlightField);
        }
    }
}

//Add event without overwriting existing ones
function addEvent(obj, evType, fn){ 
 if (obj.addEventListener){ 
   obj.addEventListener(evType, fn, false); 
   return true; 
 } else if (obj.attachEvent){ 
   var r = obj.attachEvent("on"+evType, fn); 
   return r; 
 } else { 
   return false; 
 } 
}

// add onload events without overwriting ones already there
function addLoadEvent(func) {   
    var oldonload = window.onload;
    if (typeof window.onload != 'function'){
        window.onload = func;
    } else {
        window.onload = function(){
        oldonload();
        func();
        }
    }
}

addLoadEvent(initHighlight);

If anyone can work out why this is happening I would be very grateful.

Thanks in advance,

The browsers are funny in how they handle changing CSS classes after the page is loaded.

See if this works any better (warning, untested)

function highlightField() {
    this.setAttribute("className",this.className+" highlightField");
    this.className += " highlightField";
}
function unhighlightField() {
    var corrected = this.className.replace(/highlightField/g, "");
    this.setAttribute("className",corrected);
    this.className = corrected;
}

Thanks, I still cant get this working. I've added another function so that a class is applied to all text boxes to begin with (as IE was putting annoying borders around my radio boxes and checkboxes with the border set on input)

Now the initial class 'normalField' is being applied in IE but not FF. But the onclick does change in FF, but not IE.

This is getting on my nerves now, ruddy thing

//Add class to textboxes ONLY
function borderField() {
    this.setAttribute("className",this.className+" normalField");
    this.className += " normalField";
}

//Add Highlight
function highlightField() {
    this.setAttribute("className",this.className+" highlightField");
    this.className += ' highlightField';
}

//Remove Highlight
function unhighlightField() {
    var corrected = this.className.replace(/highlightField/g, "");
    this.setAttribute("className",corrected);
    this.className = corrected;
}

//Unobtrusive JS focus/blur
function initHighlight() {
    if (!document.getElementsByTagName){ return; }
    var allfields = document.getElementsByTagName("input");

    // loop through all input tags and add events
    for (var i=0; i<allfields.length; i++){
        var field = allfields[i];
        if ((field.getAttribute("type") == "text") || (field.getAttribute("type") == "password") ) {
            borderField();
            addEvent(field, 'focus', highlightField);
            addEvent(field, 'blur', unhighlightField);
        }
    }
}

//Add event without overwriting existing ones
function addEvent(obj, evType, fn){ 
 if (obj.addEventListener){ 
   obj.addEventListener(evType, fn, false); 
   return true; 
 } else if (obj.attachEvent){ 
   var r = obj.attachEvent("on"+evType, fn); 
   return r; 
 } else { 
   return false; 
 } 
}

// add onload events without overwriting ones already there
function addLoadEvent(func) {   
    var oldonload = window.onload;
    if (typeof window.onload != 'function'){
        window.onload = func;
    } else {
        window.onload = function(){
        oldonload();
        func();
        }
    }
}

addLoadEvent(initHighlight);

Thanks