如何在同一輸入類型中設置不同樣式的兩段文字=文字

Question

我想知道如何在相同的 input type = text中對文本的兩個部分進行不同的樣式設置，與Google的做法非常相似。當您在Google搜索框中輸入幾個字符 時，它們會以正常的黑色字體呈現，但它們是 ，隨後是以灰色字體呈現的建議​​完成。所以，我們在同一個輸入框中有兩個部分 具有不同的字體屬性。

Answer 1

文本輸入是單色的 - 沒有辦法。像這樣的效果只能通過Javascript欺騙來實現。

谷歌肯定在使用div元素，灰色文本懸停在文本輸入的上方或下方。 div最初是不可見的，但是當你開始輸入時，它將包含查找文本。它具有與文本輸入相同的字體大小。文字輸入將包含完整的建議，並以黑色顯示。

我想這不是完全微不足道的做法，可以跨瀏覽器工作......但並非完全不可能。這可能已經存在一個組件或jQuery插件。

Answer 2

谷歌實際上並沒有這樣做，但它呢？至少那不是我在電腦上看起來的樣子。文本框是正常字體，它是建議完成項目的樣式。他們可能只是在一個div或其他東西，而不是輸入。

Answer 3

Google直接在對方上面使用兩個文本框。它們具有不同的文字顏色，並且最上面的文字具有透明背景。用Firebug看看它是如何工作的。