文本框的Javascript“水印”[重复]答案

【问题标题】：Javascript "watermarks" for textboxes [duplicate]文本框的Javascript“水印”[重复]
【发布时间】：2009-12-15 23:45:30
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

...来自 Stack Overflow 搜索框。

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

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

【讨论】：

【解决方案2】：

更现代的方式是使用“PlaceHolder”

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

通俗地说：

代码：

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

【讨论】：

【解决方案5】：

JS：

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

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

【讨论】：

不要使用'onfocus'属性。改用事件
onfocus（以及onblur）属性本质上是事件。它们的值等于绑定到事件的函数的主体。因此，将clearDefault(this) 用于onfocus 本质上就是将此绑定作为您的focus 事件处理程序：function() { clearDefault(this); }

【解决方案6】：

见这篇文章http://www.alistapart.com/articles/makingcompactformsmoreaccessible。当然，如果你使用 jQuery，还有“Label over”插件。

【讨论】：