用於文本框的Javascript「水印」

Question

我想知道如何在頁面加載時將文本置於文本框中。例如：如果我有一個登錄頁面，我會有兩個名爲「用戶名」和「密碼」的文本框。當頁面加載時，我希望在文本框中加載內部寫入的「用戶名」，所以我不必爲外部添加標籤。但是當用戶點擊文本框內時，它應該消失。我該怎麼做呢？

Answer 1

<input name="q" onfocus="if (this.value=='search') this.value = ''" type="text" value="search"> 

...從堆棧溢出搜索框。

---

您還可以添加onblur事件進行檢查：if (this.value=='') this.value = 'search'

這將重新打印水印時，文本框外的用戶點擊，字段爲空。

Answer 2

有很多關於如何做到這一點的教程。 Here's one walkthrough使用jQuery javascript框架。

這裏的another popular blog post關於它，只是使用普通的javascript。

Answer 3

JS：

function clearDefault(ctl){ 
     if(ctl.value==ctl.defaultValue) { ctl.value = ""; } 
    } 

在你的文本包括onfocus="clearDefault(this)"並將其文本設置爲 「用戶名」 和 「密碼」。

Answer 4

看到這篇文章http://www.alistapart.com/articles/makingcompactformsmoreaccessible。當然，如果您使用的是jQuery，則會有「Label over」插件。

Answer 5

在外行人的術語：

• 當着眼於輸入，如果值是「用戶名」，然後將其設置爲「」
• 當從包裝盒中取出聚焦，如果該值是「」（即沒有被輸入），復位爲「用戶名」仍然提供反饋給用戶，因爲他們還沒有進入數據

代碼：

<input value="Username" onfocus="if(this.value=='Username') this.value = ''" onblur="if(this.value=='') this.value = 'Username'" type="text" /> 

Answer 6

一個更現代的方法是使用 「佔位符」

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