7

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

4

6 回答 6

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

...来自Stack Overflow搜索框。

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

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

于 2009-12-15T23:48:37.160 回答
7

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

<input type="text" placeholder="search" />
于 2014-08-01T17:24:01.090 回答
4

有很多关于如何做到这一点的教程。 这是一个使用 jQuery javascript 框架的演练。

这是另一篇关于它的流行博客文章，仅使用常规 javascript。

于 2009-12-15T23:50:12.430 回答
4

通俗地说：

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

编码：

<input value="Username" onfocus="if(this.value=='Username') this.value = ''" onblur="if(this.value=='') this.value = 'Username'" type="text" />
于 2009-12-15T23:51:42.083 回答
0

JS：

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

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

于 2009-12-15T23:50:18.013 回答
0

请参阅这篇文章http://www.alistapart.com/articles/makingcompactformsmoreaccessible。当然，如果您使用 jQuery，则有“Label over”插件。

于 2009-12-15T23:50:35.440 回答