Web design can be so messy sometimes.
I don’t use the Google Toolbar, but I know many who do. One of its most popular features is AutoFill—just set up a profile, and then every time you’re filling out a form, the toolbar can save you a lot of typing.
Yellow input fields
Pretty darn handy. But, as a lot of developers have noticed, Google Toolbar’s method of form styling can be annoying. It forces any field it thinks it can autofill to be yellow. This can cause some minor confusion, as users who have completely forgotten, or never really knew, where the yellow came from, wonder whether these are required fields, you’ve designed the page strangely, or what.
Or it can cause a form to be completely illegible.
As I recently realized, while putting together a contact form which features light-on-dark type. The AutoFill fields? white on yellow.
I bet Jakob Nielsen would argue that all forms should be black-on-white, always. (Well, he might.) But we’re talking about a simple contact form on a very style-conscious mini-site. The site is already light text on a dark background, it’s live, the client loves it. We’re not introducing black type in white boxes, already.
There is a simple fix for this: just add !important after your style declaration for input fields, like this:
input {
color: white;
background: black !important;
}
The only problem with this approach is that people used to AutoFill may not think they can use it on your site. I’d rather not reduce the usability of my site.
A better solution would be to highlight the input fields with colors of your choosing, and then feature a message explaining what the different color is for. By doing this, you might even help some people out who’ve been wondering why forms all over the internet seem to have some sort of patchy hepatitis.
And this solution is exactly what Jon Jensen offered, and wrote up, quite well, in his article Outsmarting the Google Toolbar. Just add a hidden message to your site about AutoFill, and then add the script, and then people w/o the Toolbar don’t see anything different. The Toolbar users will see the form styled with colors of your choosing, and any fields that can be AutoFilled will be highlighted as you decide, not Google, and they get a handy take-home message.
Jenseng’s work is brilliant, and must have saved the sanity of many a designer out there over the past 4 years. At this point, though, I had a few questions:
- Could I wrap this up in a smaller, more portable script that I could understand?
- Could I make the style something I can modify in my style sheet?
- And while I’m at it, could I skip having to add the message to the form itself?
- And, wait a second—what about Firefox users? This isn’t working for Firefox at all! What’s going on?!?
The first two seemed relatively simple. As I read through his script, I thought I could maybe get it working in jQuery, so it could just be fit into a framework I was already using.
Get technical, Riff
Jenseng’s code adds an onpropertychange Event Listener to input and select fields; if a property changes, and the background isn’t the correct color you’ve chosen (e.g., #a0d0ff, or another hex color), it notices and changes the background back, and changes the display of a message to display: block.
Okay, I think I’m up for that in jQuery. Did some reading to figure out how to attach a function. (Keep in mind that basically, when it comes to JavaScript, I am a ninny.)
$("input, select").bind('propertychange',function(e) {
if( $(this).css('background-color') != '' ) &&
$(this).css('background-color') != '#333333' ) {
$(this).addClass("autofill");
$("form").append("<div id=\"googleblurb\">AutoFill highlighted fields with Google toolbar</div>");
return false;
}
}
Looks about right. Only trouble is, it didn’t work. Not until I stripped the if statement down, and instead of checking whether it was not the color I wanted, I checked whether it was the color Google chose:
if( $(this).attr('style') == 'BACKGROUND-COLOR: #ffffa0' ) {
Once I specified some appropriate CSS for .autofill, including the important declaration, seemed to work for Internet Explorer. And yes, BACKGROUND-COLOR had to be in caps. Ah, Problem solved!
Get really technical, Riff
Not so fast. I asked Leah, my charming client ( have you seen her felting work? To die for.) to test the form. She still saw the problem.
This is where Firefox comes in. I had to install the correct version of the Google Toolbar (not the new beta version, which finally colors text and background, like it shoulda all along), and then I saw that Firefox wasn’t having any of it.
While studying all this, I came across the blog of another developer far more brilliant than I who was writing jQuery event listeners for a more robust need.
Turns out Firefox doesn’t recognize onpropertychange or propertychange. It does, however, look for DOMAttrModified. So I modified my script to include this:
if ($.browser.mozilla) {
var binder = 'DOMAttrModified';
} else {
var binder = 'propertychange';
}
$("input, select").bind(binder,function(e) {
That got me halfway there. Oh god, is there more? Yes, yes there is.
Not only that, but Firefox doesn’t think any colors are in hex at all. They’re all in RGB. (Thanks to Stoyan Stefanov at phpied.com for his article clarifying this.) So we have to test the color differently.
Finally, many cups of coffee later, I came up with the following script, which works for me (can you tell I just want to wrap up?):
if ($.browser.mozilla) {
var binder = 'DOMAttrModified';
var googlefill = 'background-color: rgb(255, 255, 160);';
} else {
var binder = 'propertychange';
var googlefill = 'BACKGROUND-COLOR: #ffffa0';
}
$("input, select").bind(binder,function(e) {
if( $(this).attr('style') == googlefill ) {
$(this).addClass("autofill");
if( $("#googleblurb").length == 0 ) {
$("form").append("<div id=\"googleblurb\" class=\"autofill\">AutoFill highlighted fields with Google toolbar</div>");
}
return false;
}
});
Then I could style the Google blurb how I wanted, it matched the autofill fields, and I could rest.