Typeahead的灰色输入提示是如何实现的？

Question

我想实现这种灰色暗示效果.

但是,当我尝试检查元素时,类型会失去焦点并且提示消失,这使得很难看到这里发生了什么.

基本上,他们有类似的东西

<input class="tt-hint">
<input class="tt-input">
<pre>col</pre>

而且我似乎无法通过在DOM树中搜索"orado"来找到任何东西.我也没有在这三个元素的样式中找到它.

有人可以通过在jsFiddle上编写一个例子来说明这种效果是如何实现的吗？谢谢!

Answer 1

该值的值input.tt-hint设置为typeahead建议.它没有被插入到DOM中,它正在设置.val()它.

诀窍是input.tt-hint透明,只读和定位在实际输入上.这是灰色的一点,并将typeahead.css:136灰色定义为.twitter-typeahead .tt-hint {color: #999999;}.

同时,有一个<pre>设置为用户输入的值,放在正上方input.tt-hint,以显示原始颜色.那个实际上放在DOM中,如果你检查元素,你会发现,在上面的例子中,"col".

我最好的建议是,在将来,你应该检查元素,使它成为你可以在同一个屏幕上看到代码中的元素和渲染的输入.然后你可以开始输入,看看有什么变化.