Google如何在主搜索栏中完成半完成的鬼文本？

Question

当您开始在搜索栏中输入熟悉的内容时，它将以幻文完成。由于文本不突出显示，我猜它是生成和定位的背景图像。有谁知道他们是如何做到的？我想建立类似的东西。

Answer 1

这是谷歌如何做到的：

透明输入框后面的

是包含键入字母的div以及带有“ghost”字样的容器。所有这些都是精心对齐的，这样输入的字母完全隐藏了“幽灵词”的字母。

Answer 2

这是文字。在同一个位置有几个div。您输入的文本和灰色的自动提示文本位于两个单独的div中。

也有文本输入，但在输入文本时没有任何价值。我认为如果需要，它会在某些时候填充javascript。

无论如何，您可以通过在搜索框中键入几个字母，右键单击，点击“检查元素”并在DOM检查器中稍微戳一下来确认这一点。

我对正在发生的事情的解释是：

1. 您输入文本框

2. 文本框会立即清除，无论你输入什么内容都放在“黑色”div中

3. 自动提示例程发生，“灰色”div填充了建议的其余部分。

Answer 3

这实际上是文字，而不是图像。同样的问题得到了回答here。

此外，这是另一个有效的小片段（Javascript）：

<FORM action="http://www.domain.com" method="post">
<INPUT type="text" size="25" value="Enter Your Default Text Here" onFocus="if(this.value       == 'Enter Your Default Text Here') {this.value = '';}" onBlur="if (this.value == '')     {this.value = 'Enter Your Default Text Here';}" />
<INPUT type=submit value=Submit>
</FORM>

Answer 4

不是图片，而是div标签中的文字。

你可以使用类似的firebug och获取确切的代码，下面你会看到他们如何做的重要元素。当然你也需要一些javascript：

<div style="position: relative; width: 100%; height: 25px;">
<input type="text">
<div>goo</div>
<div>google</div>
</div>

（我在输入标记后面的第一个div-tag中输入了goo，他们在第二个标记中输入google作为建议。如果你查看真实的代码你看到它们有不同的样式属性来获得不同的颜色。我删除了很多，因为它在答案中并不重要，它们使用的颜色是什么颜色）