>
 





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:

Want automatic updates? Subscribe to our RSS feed or
Get Email Updates sent directly to your inbox!

Currently rated 5.0 by 5 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5


Comments

November 4. 2007 08:22

Thanks,

Needed that for a client's website design & development project. I will have to do this to my form on my online portfolio.

A

s4int | Reply

November 4. 2009 13:01

Social comments and analytics for this post

This post was mentioned on Twitter by bloggingdev: Cross-Browser solution for correcting mysterious yellow input fields caused by Google Toolbar's AutoFill feature - http://su.pr/6WCQMn

uberVU - social comments | Reply

Add comment




(Will not be displayed!)








Free CMS