javascript - 褪色文本对 Google 搜索的影响如何运作？

Question

在 Google 上搜索时，自动完成结果显示在下方，就像许多其他网站一样。

但除此之外，对于出现在输入框本身中的最有可能的搜索查询，有一个淡化文本自动完成，而不改变光标的位置。请参阅随附的屏幕截图。我检查了控制台，但那里没有任何用处。

这样的效果是如何实现的？

Answer 1

Google 通过设置一个单独的 input 的值来做到这一点元素 直接堆叠在“事件”元素的后面。如果您查看源代码，您会发现在同一个地方有许多元素:

<div id="gs_lc0" style="position: relative;">
    <input id="gbqfq" class="gbqfif" name="q" type="text" autocomplete="off" value="" style="border: none; padding: 0px; margin: 0px; height: auto; width: 100%; background-image: url(data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D); background-color: transparent; position: absolute; z-index: 6; left: 0px; outline: none; background-position: initial initial; background-repeat: initial initial;" dir="ltr" spellcheck="false">
    <div class="gbqfif" style="background-color: transparent; color: transparent; padding: 0px; position: absolute; z-index: 2; white-space: pre; visibility: hidden; background-position: initial initial; background-repeat: initial initial;" id="gs_sc0"></div>
    <input class="gbqfif" disabled="" autocomplete="off" style="border: none; padding: 0px; margin: 0px; height: auto; width: 100%; position: absolute; z-index: 1; background-color: transparent; -webkit-text-fill-color: silver; color: silver; left: 0px;" id="gs_taif0" dir="ltr">
    <input class="gbqfif" disabled="" autocomplete="off" style="border: none; padding: 0px; margin: 0px; height: auto; width: 100%; position: absolute; z-index: 1; background-color: transparent; -webkit-text-fill-color: silver; color: silver; left: 0px; visibility: hidden;" id="gs_htif0" dir="ltr">
</div>

这是第二个<input>这似乎是在处理变灰的建议文本。