Form auto-fill toolbars and the colors of the inputs

March 5th, 2006. Tagged: JavaScript, Usability

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.

Auto-fill toolbar
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:
JCreator screenshot

Screenshot with the auto-fill ON:
JCreator screenshot

Tell your friends about this post: Facebook, Twitter, Google+

4 Responses

  1. I don’t have an auto-filler installed so I can’t see your script in action, but my initial reaction when seeing your solution of setting the foreground color to the negative value of the background color is twofold:
    1) I think it sounds like a very cool solution
    2) I start to wonder about the many different foreground colors this will produce, depending on the background color… *hmm, I’m not sure I would want all the colors of the rainbow used…*

    Perhaps another solution would be to choose two colors as default colors:
    One dark foreground color (usually black) for use with light backgrounds
    One light foreground color (usually white) for use with dark backgrounds
    and then toggle between these two presets depending on the background color. If the red, green, and blue values of the background color are all too close to their counterparts in the foreground color that’s being used, we switch to the other predefined foreground color.

    Then again, there are advantages and disadvantages with both solution, I guess… *as always :-) *

  2. trying to fill in an address form for autofill

  3. Very usefull thanks!

  4. very informative artical thanks for share my bro..

Leave a Reply