在文本框中放置文本

Question

有沒有辦法將文本放入文本框中，但也允許用戶鍵入內容。我想在框中輸入「username：」，並允許用戶在冒號後鍵入。我可以通過在文本框旁邊創建一個div來實現這一點，並使它看起來像是一個容器，但我想知道是否有更簡單的方法？謝謝

編輯：我不想文字消失。我只是想用戶能夠繼續鍵入

編輯2：你不能把在文本框中的值的原因是因爲它的形式。當用戶鍵入用戶名旁邊的值會提交的申報

Answer 1

你可以做這樣的事情：

<div> 
    <label>Username:</label> 
    <input type="text" /> 
</div> 

CSS

div{border:1px solid gray;} 
label{font-family:arial; font-size:.8em;} 
input{border:none;} 
input:focus{outline:none;} 

基本上，創建了一個包含div，並在div中放置了一個label和input。 label是留在這個領域的話。 input已將border刪除。

http://jsfiddle.net/jasongennaro/rZmFx/

據透露......你可能需要增加input的大小，取決於你想要多少個字符接受。

Answer 2

一旦加載頁面你可以調用這個javascript函數：

function add(text){ 
    var TheTextBox = document.getElementById("Mytextbox"); 
    TheTextBox.value = TheTextBox.value + text; 
} 

Answer 3

如果使用的是HTML5，你可以使用佔位符屬性。

http://www.w3schools.com/html5/att_input_placeholder.asp

Answer 4

HTML5有placeholder屬性您現在可以使用：

<input type="text" placeholder="username" /> 

人也有created javascript functions模仿此功能。

還有一個jQuery placeholder插件，做同樣的，如果你願意走這條路。

Answer 5

使用標準HTML有什麼問題？你不說，你需要它消失......

<input type="text" value="username: " /> 

如果你需要它消失，使用佔位符屬性和jQuery插件作爲備用（對於不支持它的瀏覽器。

Answer 6

<input type="text" placeholder="Category"/> 

也許這可以幫助你。如果你想只讀文本框，你可以把屬性readonly = ""。