phpied.com

I recently posted about those auto-fill utilities, like the one found in the Google toolbar. They are designed with one mission in mind - to fill form fields for you. When you hit a page with a form, if the form has fields with common names such as "name" or "email", the auto-fill utility can populate the form for you, using some previously stored (by you) values.

How the Google toolbar for Firefox's auto-fill looks like

All is good, but in order to communicate which fields can be auto-completed, these type of tools change the input background to colors such as yellow. And if you have a dark page with dark background and light (white) foreground colors on the form fields, you cannot really see you're typing. (examples)

To workaround this I tried implementing a solution (as Marco suggested in the comment to the previous posting) where a javascript:
- traverses all text input fields
- gets the background color using the computed styles
- checks if the color is as expected. And if not:
- calculates a negative value of the background color and sets it as a foreground color.

Try the demo. In order to see exactly what it does, you need to have an auto-filler installed.

Some notes

Parsing color values

This demo is using a lighter version of my own RGBColor-parsing class. Lighter, beacuse it really needs to parse only two types of color values: rgb(xxx, yyy, zzz) and #xxyyzz.

Computed styles

There is a difference between IE and FireFox (anyone surprised?) in the way the computed styles are returned.

IE:
the_element.currentStyle.backgroundColor
will return something like #ffaadd

FireFox:
document.defaultView.getComputedStyle(the_element,'').getPropertyValue('background-color')
will return something similar to rgb(123, 45, 67)

Auto-fill-able fields

If you want the Google toolbar's auto-fill to recognize your fields, you need proper label tags in your markup. For example:

<input type="text" name="name" id="name" />

... will not be recognized, but ...

<label for="name">Name: </label>
<input type="text" name="name" id="name" />

... is ok.

JCreator - Another live example

I saw recently another site where the issue resolved above is very noticeable. If you want to download JCreator Lite from http://www.jcreator.com/download.php?productid=215952, you need to fill out a form. Submitting the form with errors will give you back the form with errors fields highlighted in red. Excellent idea and very friendly way to show validation errors. But the fields are red and the text is white. With the auto-fill ON, you get yellow fields and white text and you cannot see what you've typed that needs correction.

Screenshot with the auto-fill OFF:

Screenshot with the auto-fill ON:

This entry was posted on Sunday, March 5th, 2006 and is filed under JavaScript, Usability. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Get notification for future posts: follow me on Twitter or subscribe to my RSS feed