你能单独用CSS在HTML文本框中显示灰色提示吗?

这个 "placeholder" 属性为 now supported 所有主流浏览器。

<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/

我不知道用CSS怎么做。但看看页面源代码,就这么做是明智的:

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

以“onfocus”开始的中间线是工作发生的地方。当文本字段获得焦点时,它会检查是否存在默认值(“search”)。如果是,则将值设置为“”(空字符串)。否则,文本不受影响。

这里的一个潜在问题是,如果有人试图搜索“search”这个词,然后在框外单击并再次单击返回,文本就会被重置。这不是个大问题,但在你工作的时候要记住。

标准名称是水印输入。

http://digitalbush.com/projects/watermark-input-plugin/

如果你想用HTML+CSS 只有 ,您可以尝试使用新的HTML5 placeholder Modernizr 为此功能检测浏览器对此功能的支持。

我不建议为此使用内联Javascript——这是一种不好的做法,违反了内容和行为分离的原则。例如,使用jQuery,类似这样的方法可以工作:

var input = $('input[name="search"]');
var placeHolder = input.attr('placeholder');

input.val(placeHolder);

input.focus(function(){
    this.value = '';
}).blur(function(){
    if(this.value === '') this.value = placeHolder;
});

只需使用“占位符”属性:

<

2. 不-如果允许这样的子元素,你可以这样做

input {
    position: relative;
}

input label {
    position: absolute;
    top: 0;
    left: 0;
}

input:focus label {
    display: none;
}

但是不能有输入的子对象(AFAIK),所以 .

1. 是的,请参见上面的链接(使用jQuery,但通常不使用jQuery)

<script>
    function inputFocus(i){
        if(i.value==i.defaultValue){ i.value=""; i.style.color="#000"; }
    }
    function inputBlur(i){
        if(i.value==""){ i.value=i.defaultValue; i.style.color="#888"; }
    }
</script>

...

<input type ="text"onfocus="inputFocus(this)" onblur="inputBlur(this)" value="Some Text"/>

希望这有帮助