文本輸入中部分字符串的不同文本顏色

Question

如何設置字符串的一部分作爲文本輸入的值，但仍處於輸入字段中？

我知道一個人可以在元素中使用帶有可滿足屬性的元素來做到這一點，但是Google會在輸入文字時用它的即時建議做到這一點。第一個完成/建議出現在輸入中。

Answer 1

雖然谷歌使用類似於THIS

可惜你不能「開放式超近距離」的input元素，如：

<input> <span>Bold</span> normal </input> 

我的建議是走這條路LIVE DEMO使用contenteditable。

<div id="input" contenteditable="true"><span>This is </span> quite cool!</div> 

CSS樣本：

#input{ 
    font-family:Arial, Helvetica, sans-serif; 
    border:1px solid #ccc; 
    background:#eee; 
    height:20px; 
    width:200px; 
    padding:7px; 
    color:#888; 
} 
#input span{ 
    color:#444; 
    font-weight:bold; 
} 

比JS檢索元素 「值」），可以使用：

alert(this.textContent); 

EXAMPLE

Answer 2

就用戶體驗而言，我認爲最好的用戶體驗不會完成用戶輸入的內容，而是顯示輸入下方的建議/完成選項。