你能用CSS單獨顯示HTML文本框中的灰色提示嗎？

Question

您可以在網絡上不時看到這些文本輸入框：框內顯示一個灰色標籤，但一旦您鍵入該標籤，灰色文本就會消失。這個頁面甚至有一個：「標題」字段的行爲就像那樣。

所以，問題：

1. 是否有這樣的標準術語？我真的很努力地找到谷歌上的任何東西

2. 它可以用CSS來完成嗎？

3. 失敗了，可以用本地化的JavaScript來完成嗎？ （即，只在標籤內的代碼，而不是在HTML標頭中）。

Answer 1

的"placeholder"屬性是now supported所有主流瀏覽器按照這個網頁。

<form> 
<input type="text" placeholder="placeholder text"> 
</form>​ 

風格化似乎仍然需要供應商前綴：

input::-webkit-input-placeholder { 
    color: #59e; 
}  
input:-moz-placeholder { 
    color: #59e; 
} 
​ 

這裏看到：http://jsfiddle.net/webvitaly/bGrQ4/2/

Answer 2

我不知道用CSS做這件事的方法。但是看看頁面源代碼，SO正在這麼做：

<input name="q" class="textbox" tabindex="1" 
     onfocus="if (this.value=='search') this.value = ''" 
     type="text" maxlength="80" size="28" value="search"> 

以「onfocus」開頭的中間行是工作發生的地方。當文本字段獲得焦點時，它會檢查是否存在默認值（「搜索」）。如果是這樣，它將值設置爲''（空字符串）。否則，文本不受影響。

這裏存在的一個潛在問題是，如果有人試圖搜索單詞「搜索」，然後點擊框外並再次單擊，文本被重置。這不是一個大問題，但是在你工作的時候要記住一些事情。

Answer 3

1. 我稱之爲輸入標籤。不知道這是否是一個標準的
2. 都能跟得上 - 你可以，如果他們被允許的子元素，像這樣

input { 
    position: relative; 
} 

input label { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

input:focus label { 
    display: none; 
} 

但是你不能有輸入孩子（據我所知）所以它將不起作用。

1. 是的，看到上面的鏈接（使用jQuery，但不平凡完成）

Answer 4

如果你想這與HTML + CSS 只有，你可以嘗試使用新的HTML5 placeholder輸入屬性。不幸的是，這個屬性沒有得到廣泛的支持，所以請嘗試使用諸如Modernizr之類的腳本來檢測此功能的瀏覽器支持。

我不會推薦使用內聯Javascript來做到這一點 - 這是不好的做法，違背了內容和行爲分離的原則。例如，使用jQuery，像這樣的東西可以工作：

var input = $('input[name="search"]'); 
var placeHolder = input.attr('placeholder'); 

input.val(placeHolder); 

input.focus(function(){ 
    this.value = ''; 
}).blur(function(){ 
    if(this.value === '') this.value = placeHolder; 
}); 

Answer 5

標準名稱是水印輸入。

，如果你有興趣的JQuery http://digitalbush.com/projects/watermark-input-plugin/

Answer 6

有內置的瀏覽器新的HTML。

只需使用「佔位符」屬性：

<輸入ID =「輸入框」類型=「文本」佔位符=「提示文字在這裏」>

Answer 7

您可能已經發現你的答案尋找，但其他人，這可能有助於

<script> 
    function inputFocus(i){ 
     if(i.value==i.defaultValue){ i.value=""; i.style.color="#000"; } 
    } 
    function inputBlur(i){ 
     if(i.value==""){ i.value=i.defaultValue; i.style.color="#888"; } 
    } 
</script> 

...

<input type ="text"onfocus="inputFocus(this)" onblur="inputBlur(this)" value="Some Text"/> 

希望這可以幫助