褪色文字对Google搜索的影响如何？

Question

在Google上搜索时,自动填充结果会显示在下方,就像许多其他网站一样.

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

如何实现这样的效果？

Answer 1

谷歌通过设置一个单独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>似乎正在处理灰色的建议文本。