表单自动填充工具栏和输入的颜色

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.

我最近发布了有关这些自动填充工具的信息，例如Google工具栏中的工具。 设计它们时要牢记一个任务-为您填写表单字段。 当您点击带有表单的页面时，如果表单具有通用名称(例如“ name”或“ email”)的字段，则自动填充实用程序可以使用一些先前存储的(由您自己)值为您填充表单。

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

用于Firefox自动填充的Google工具栏的外观

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.

要解决此问题，我尝试实现一种解决方案(如Marco在上一篇文章的注释中所建议的)，其中使用javascript：-遍历所有文本输入字段-使用计算的样式获取背景颜色-检查颜色是否符合预期。 如果不是，则：-计算背景色的负值并将其设置为前景色。

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.

该演示使用的是我自己的RGBColor-parsing类的较浅版本。 更轻，因为它实际上只需要解析两种类型的颜色值： rgb(xxx, yyy, zzz)和#xxyyzz 。

计算样式 (Computed styles)

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

IE和FireFox在返回计算样式的方式上有所不同(有人感到惊讶吗？)。

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

IE： the_element.currentStyle.backgroundColor将返回类似#ffaadd

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

FireFox： document.defaultView.getComputedStyle(the_element,'').getPropertyValue('background-color')将返回类似于rgb(123, 45, 67) document.defaultView.getComputedStyle(the_element,'').getPropertyValue('background-color') 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:

如果要让Google工具栏的自动填充功能识别您的字段，则需要在标记中使用适当的标签标签。 例如：

<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-另一个实时示例 (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.

我最近看到另一个网站，上面的问题很明显。 如果要从http://www.jcreator.com/download.php?productid=215952下载JCreator Lite，则需要填写表格。 提交有错误的表单会使您退回带有红色突出显示的错误字段的表单。 好主意和非常友好的方式来显示验证错误。 但是字段为红色，文本为白色。 启用自动填充功能后，您会看到黄色字段和白色文本，并且看不到您输入的内容需要更正。

Screenshot with the auto-fill OFF:

自动填充为OFF的屏幕截图：

Screenshot with the auto-fill ON:

自动填充为ON的屏幕截图：

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/auto-filler-toolbars-and-the-colors-of-the-inputs/