你能在一个只有CSS的HTML文本框中显示灰色提示吗？

Question

您可以在网络上不时看到这些文本输入框:框内会显示灰色标签,但一旦您在那里键入,灰色文本就会消失.这个页面甚至有一个:"标题"字段的行为与此完全相同.

所以,问题:

1. 这有一个标准术语吗？我真的很难在谷歌上找到任何东西

2. 它可以用CSS完成吗？

3. 如果不这样做,可以使用本地化的JavaScript吗？(即代码只在标记内,而不是在HTML标题中).

Answer 1

现在,所有主流浏览器都支持该"placeholder"属性.

<form>
<input type="text" placeholder="placeholder text">
</form>?

样式仍然似乎需要供应商前缀:

input::-webkit-input-placeholder {
    color: #59e;
}    
input:-moz-placeholder {  
    color: #59e;  
}
?

见到这里:http://jsfiddle.net/webvitaly/bGrQ4/2/

Answer 2

我不知道用CSS做这件事的方法.但是看一下页面来源,SO正在这样做:

<input name="q" class="textbox" tabindex="1" 
       onfocus="if (this.value=='search') this.value = ''" 
       type="text" maxlength="80" size="28" value="search">

以"onfocus"开头的中间线是工作正在进行的地方.当文本字段获得焦点时,它会检查是否存在默认值("搜索").如果是这样,它将值设置为''(空字符串).否则,文本不受影响.

这里的一个潜在问题是,如果有人试图搜索"搜索"一词,然后在框外点击并再次点击,文本将被重置.这不是一个大问题,但在你工作的时候要记住一些事情.

Answer 3

标准名称是水印输入.

如果您对JQuery感兴趣,请点击此页面 http://digitalbush.com/projects/watermark-input-plugin/