文本框的Javascript“水印”

Question

我想知道如何在页面加载时将文本放在文本框中。示例：如果我有登录页面，我将有2个名为“username”和“password”的文本框。当页面加载时我想要加载文本框，里面写有“用户名”，所以我不必在外面添加标签。但是，当用户在文本框中单击时，它应该消失。我该怎么做？

Answer 1

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

...来自 Stack Overflow 搜索框。

---

您还可以添加onblur事件来检查：if (this.value=='') this.value = 'search'

当用户在文本框外部单击并且该字段为空时，这将重新打印水印。

Answer 2

更现代的方法是使用＆＃34; PlaceHolder＆＃34;

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

Answer 3

有很多关于如何做到这一点的教程。 Here's one walkthrough使用jQuery javascript框架。

以下是关于它的another popular blog post，只是使用常规的javascript。

Answer 4

用外行人的话来说：

• 当关注输入时，如果值为“用户名”，则将其设置为“”
• 从框中移除焦点时，如果值为“”（即未输入任何内容），请将其重置为“用户名”，以便仍然向用户提供反馈，因为他们尚未输入数据

代码：

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

Answer 5

JS：

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

在您的文本框中添加onfocus="clearDefault(this)"并将其文本设置为“用户名”或“密码”。

Answer 6

请参阅此文http://www.alistapart.com/articles/makingcompactformsmoreaccessible。当然，如果你使用的是jQuery，那么就有“Label over”插件。