I recently posted about correcting mysterious yellow input fields caused by Google Toolbar's AutoFill feature. However, today I discovered that the JavaScript given in the post only corrects the background color in Internet Explorer. The reason is simple: onPropertyChange event handler is not defined for other browsers.

So I wrote a cross-browser JavaScript code snippet to correct the yellow background color of input fields. 

Copy and paste the following script into the head section of your HTML document. 

<script language="JavaScript" type="text/javascript">
    if(window.attachEvent)
    {//Attach to onload event in IE
        window.attachEvent("onload",resetStyles);
    }
    else
    {//Attach to load event in Other Browser
        window.addEventListener("load",resetStyles,false);
     //Attach to focus event in other browsers to disable
     //background color change in tabbed browsing 
        window.addEventListener("focus",resetStyles,false);  
    }

    function resetStyles()
    {
        resetStyle('input');
        resetStyle('select');
    }

    function resetStyle(inputType)
    {
        var count=document.getElementsByTagName(inputType);
        for(var i=0;i<count.length;i++)
        {
            if(window.attachEvent)
            {//Attach to onpropertychange event in IE
                count[i].attachEvent('onpropertychange',resetBC);
            }
            else
            {//Apply the style reset onload
                resetOther(count[i]);
            }
        }
    }
   
    function resetOther(El)
    {
        if(El.style.backgroundColor!='')
            El.style.backgroundColor='';
    }
    function resetBC()
    {
        if(event.srcElement.style.backgroundColor!='')
            event.srcElement.style.backgroundColor='';
    }
</script>

The code snippet is tested with the following browsers:

• Internet Explorer 5
• Internet Explorer 6
• Internet Explorer 7
• Mozilla Firefox 2+
• Opera
• Safari
  
  

Comments

Add comment