What is causing my text input fields background to turn yellow?
The reason single line input textboxes background turns yellow is because Google's toolbar has an autofill feature for forms.
When you go to a page and the google toolbar recognizes the names of the fields then it highlights those fields so you know it could fill them in for you.
Granted it's a nice thing but it has definitely caused problems for web designers. Hopefully it's not going to start highlighting fields in swfs but ya never know.
How do I stop my text input fields background from turning yellow?
It's very simple.
<SCRIPT TYPE="text/javascript"><!--
// Javascript fix for the google tool bar yellow text fields
if (window.addEventListener) { //DOM method for binding an event
window.addEventListener("load", setListeners, false)
} else if (window.attachEvent) { //IE exclusive method for binding an event
window.attachEvent)("onload", setListeners)
} else if (document.getElementById) { //support older modern browsers
window.onload=setListeners
}
function setListeners(){
inputList = document.getElementsByTagName("INPUT");
for(i=0;i<inputList.length;i++){
if (window.addEventListener) { //DOM method for binding an event
inputList[i].addEventListener("onpropertychange",restoreStyles, false);
inputList[i].style.backgroundColor = "";
} else if (window.attachEvent) { //IE exclusive method for binding an event
inputList[i].attachEvent("onpropertychange",restoreStyles);
inputList[i].style.backgroundColor = "";
}
}
selectList = document.getElementsByTagName("SELECT");
for(i=0;i<selectList.length;i++){
if (window.addEventListener) { //DOM method for binding an event
selectList[i].addEventListener("onpropertychange",restoreStyles, false);
selectList[i].style.backgroundColor = "";
} else if (window.attachEvent) { //IE exclusive method for binding an event
selectList[i].attachEvent("onpropertychange",restoreStyles);
selectList[i].style.backgroundColor = "";
}
}
}
function restoreStyles(){
if(event.srcElement.style.backgroundColor != ""){
event.srcElement.style.backgroundColor = "";
}
}
//-->
<SCRIPT>
How can it be this simple?
Google isn't out to ruin your web design abilities, but they want to make things usuable. If you can make yellow backgrounds work with your site, then that's the best way to go with it. Otherwise you'll have to include this script on all form pages.
If this works for you, please click on a link at the bottom of the page to pay for the hosting. Thanks!
|
