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:

Digg It!DZone It!StumbleUponTechnoratiRedditDel.icio.usNewsVineFurlBlinkList

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

Add comment





(will not be displayed)








  • javascript
  • querystring
  • url parameters
  • parse querystring
  • delayed redirect
  • settimeout
  • focus
  • textbox
  • page load
  • after submit
  • set focus in asp.net 2.0/3.5
  • on page load
  • after postback
  • set control focus
  • postback
  • asp.net 1.x
  • substring
  • substr
  • javascript string methods
  • parsefloat
  • convert strings to numbers
  • parseint
  • javascript history
  • history.go
  • history.back
  • http requests
  • image maps
  • css sprites
  • external css
  • external javascript
  • compress javascript
  • javascript compression
  • ajaxcontroltoolkit
  • tab control
  • array
  • length
  • javascipt
  • lastmodified
  • mstsc
  • terminal services
  • remote desktop connections
  • null
  • undefined
  • array.join
  • string concatenation
  • setinterval
  • clearinterval
  • timing events
  • cleartimeout
  • javascript timing events
  • url redirection
  • location.href
  • location.replace
  • redirect
  • redirection
  • system.io.compression
  • viewstate compression
  • compress viewstate
  • gzipstream
  • loadpagestatefrompersistencemedium
  • savepagestatetopersistencemedium
  • form spam
  • captcha
  • prevent spam without captcha
  • url redirect
  • defaultbutton
  • enter key
  • default button
  • asp.net
  • 2.0
  • form
  • panel
  • 1.1
  • form submit
  • dopostback
  • onkeypress
  • onkeydown
  • onkeyup
  • javascript key events
  • keycode 13
  • disable enter key
  • int32.parse
  • convert.toint32
  • int32.tryparse
  • google
  • hoax
  • gmail
  • storage
  • counter
  • mail
  • visual studio 2005
  • vs 2008
  • copy
  • paste
  • clipboard data
  • static variables
  • application object
  • static property
  • server control
  • web file manager
  • iz web file manager
  • convert
  • parse
  • tryparse
  • file upload control
  • maxrequestlength
  • executiontimeout
  • httpruntime
  • asp.net 2.0
  • registering scripts
  • registerclientscript
  • registerstartupscript
  • cross-browser
  • events
  • improve web site performance
  • compression
  • caching
  • elmah
  • error logging
  • exception
  • error
  • httphandler
  • google sitemap generator
  • sitemap
  • internet information services
  • iis7
  • hosts file
  • localhost
  • windows vista
  • search engine optimization
  • seo
  • search engine friendly pages
  • headscriptmanager
  • class library
  • head
  • css
  • c#
  • iis
  • internet information services manager
  • 401.3 unauthorized
  • 500.0 internal server error
  • http error 500.19
  • google toolbar
  • yellow input fields
  • input
  • select
  • background color
  • mozilla firefox
  • medium trust
  • orcas
  • compileroptions
  • warninglevel
  • zyb
  • mobile phones
  • online backup service
  • online services
  • textarea
  • maxlength
  • limit input length
  • custom server control
  • internal error 2739
  • adobe cs3
  • adobe customer support
  • solution
  • error code 0x80004005
  • 500.19 internal server error
  • meta tags
  • keywords meta tag
  • meta
  • description meta tag
  • fake page rank domains
  • scammers
  • google page rank technology
  • ebay
  • general
  • title
  • page rank