您可以使用HTML中的placeholder属性设置占位符(浏览器支持)。可以使用CSS更改字体样式和颜色(尽管浏览器支持有限)。

input[type=search]:::-webkit-input-placeholder {/* Safari, Chrome(， Opera?) */ 颜色:灰色; 字体样式:斜体; ｝ input[type=search]:-moz-placeholder {/* Firefox 18- */ . txt 颜色:灰色; 字体样式:斜体; ｝ input[type=search]::-moz-占位符{/* Firefox 19+ */ 颜色:灰色; 字体样式:斜体; ｝ input[type=search]:-ms-input-placeholder {/* IE (10+? 颜色:灰色; 字体样式:斜体; ｝ <input placeholder="Search" type=" Search" name="q">

我使用了一个简单的，一行javascript解决方案，它的工作很棒。这里有一个文本框和文本区域的例子:

    <textarea onfocus="if (this.value == 'Text') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Text'; }">Text</textarea>

    <input type="text" value="Text" onfocus="if (this.value == 'Text') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Text'; }">

唯一的“缺点”是在对字段值做任何事情之前在$_POST或Javascript验证中进行验证。意思是，检查字段的值是不是“Text”。

对于jQuery用户:naspinski的jQuery链接似乎坏了，但试试这个: http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/

你会得到一个免费的jQuery插件教程作为奖励。：）

使用背景图像来渲染文本:

 input.foo { }
 input.fooempty { background-image: url("blah.png"); }

然后你所要做的就是检测value == 0并应用正确的类:

 <input class="foo fooempty" value="" type="text" name="bar" />

jQuery JavaScript代码如下所示:

jQuery(function($)
{
    var target = $("input.foo");
    target.bind("change", function()
    {
        if( target.val().length > 1 )
        {
            target.addClass("fooempty");
        }
        else
        {
            target.removeClass("fooempty");
        }
    });
});

我发现jQuery插件jQuery水印比上面的答案中列出的要好。为什么好吗?因为它支持密码输入字段。此外，设置水印(或其他属性)的颜色就像在CSS文件中创建.watermark引用一样简单。

我喜欢“知识奇库斯”的解决方案——简单明了。只需要在页面加载就绪时添加一个模糊调用，这将设置初始状态:

$('input[value="text"]').blur();