我想实现这个灰色提示效果。
但是，当我尝试检查元素时，预输入会失去焦点并且提示消失，因此很难看到这里发生了什么。
基本上，他们有这样的东西
<input class="tt-hint">
<input class="tt-input">
<pre>col</pre>
而且我似乎无法通过在 DOM 树中搜索“orado”找到任何东西。我也没有在这三个元素的样式中找到它。
有人可以通过在jsFiddle上写一个例子来说明这种效果是如何实现的吗？谢谢！
【问题讨论】：
标签： html css typeahead.js typeahead twitter-typeahead
input.tt-hint 的值设置为预输入建议。它没有被插入到 DOM 中，它正在设置它的 .val()。
诀窍在于input.tt-hint 是透明的、只读的，并且位于实际输入的正上方。那是灰色位，typeahead.css:136 将灰色定义为.twitter-typeahead .tt-hint {color: #999999;}。
同时，有一个<pre> 设置为用户输入的值，位于input.tt-hint 的正上方，以显示原始颜色。那个实际上是放在 DOM 中的，如果你检查元素，你会发现，在上面的例子中，“col”。
我最好的建议是，将来，您应该检查元素，制作它以便您可以在同一屏幕上看到代码中的元素和呈现的输入。然后你就可以开始打字了，看看有什么变化。
【讨论】：