如何變灰文本框的默認文本？

Question

我有一個顯示一些默認文本的文本框。鼠標懸停，文本將消失，用戶將能夠在那裏定期鍵入：

http://snpr.cm/bnGelO.jpg

不過，我想一些CSS樣式應用於默認文本，以便它看起來像教學文本沒有別的。你有什麼想法如何做到這一點？

1. 默認文本將是灰色

2. 的onmouseover文本會消失，當用戶開始輸入這將是隻是普通的黑色。

下面是當前代碼如下：

<textarea 
    class="textarea" 
    onblur="if(this.value=='') this.value='Question or topic you need help with (in one sentence)...';" 
    onfocus="if(this.value=='Question or topic you need help with (in one sentence)...') this.value='';" 
    id="question" 
    name="question" 
> 
    Question or topic you need help with (in one sentence)... 
</textarea> 

謝謝！

Answer 1

您應該考慮使用HTML5 placeholder屬性。

http://diveintohtml5.ep.io/forms.html#placeholder

此顏色的文本爲淺灰色，並且在聚焦除去。

Answer 2

存在一個重要的可用性問題，其幫助文本在焦點上消失（並且包括佔位符屬性），因爲用戶只能在元素中沒有內容並且沒有內容時才能看到文本焦點。

如果您的幫助文本比簡單的「輸入名稱...」或其他任何內容更實質，請考慮在相鄰元素中提供屏幕提示。這樣，即使用戶在textarea中輸入了一些東西，並且可以檢查他們輸入的內容是否與提示兼容，用戶仍可以看到幫助。

例如如果你想要一個特定的日期格式，在用戶向該字段輸入內容後仍然能夠顯示所需的日期格式非常方便，否則用戶可以驗證其輸入的唯一方式是刪除該條目並模糊該元素，即不僅需要做更多的工作，而且還不是很明顯。

在這種情況下，您提供了一些非常具體的建議（它必須在一個句子中）以及其他信息 - 用戶是否會記得當他們開始輸入文本時？稍後當他們檢查他們是否正確填寫了表格時呢？

用戶越容易使用它，他們越有可能遵守您的要求，而不是呻吟使用您的網站的困難。

例如

<style type="text/css"> 
    textarea.question { 
    width: 50em; 
    height: 3em; 
    border: 1px solid blue; 
    } 
    .screenHelp { 
    font-family: geneva, arial, sans-serif; 
    font-size: 80%; 
    color: #bbbbbb; 
    background-color: #ffffff; 
    } 
    .inputTitle { 
    font-family: geneva, arial, sans-serif; 
    font-size: 90%; 
    } 
    </style> 

<form action=""> 
    <div> 
    <span class="inputTitle">Question or topic you need help with</span> 
    <span class="screenHelp"> (in one sentence please)</span><br> 
    <textarea name="question" class="question"></textarea> 
    <br> 
    <input type="reset"><input type="submit"> 
    </div> 
</form>