你可以添加和删除一个特殊的CSS类，用JavaScript修改输入值onfocus/onblur:

<input type="text" class="hint" value="Search..."
    onfocus="if (this.className=='hint') { this.className = ''; this.value = ''; }"
    onblur="if (this.value == '') { this.className = 'hint'; this.value = 'Search...'; }">

然后在CSS中指定一个样式提示类，例如:

input.hint {
    color: grey;
}

你可以添加和删除一个特殊的CSS类，用JavaScript修改输入值onfocus/onblur:

<input type="text" class="hint" value="Search..."
    onfocus="if (this.className=='hint') { this.className = ''; this.value = ''; }"
    onblur="if (this.value == '') { this.className = 'hint'; this.value = 'Search...'; }">

然后在CSS中指定一个样式提示类，例如:

input.hint {
    color: grey;
}

下面是一个带有谷歌Ajax库缓存和一些jQuery魔法的函数示例。

这将是CSS:

<style type="text/stylesheet" media="screen">
    .inputblank { color:gray; }  /* Class to use for blank input */
</style>

这将是JavaScript代码:

<script language="javascript"
        type="text/javascript"
        src="http://www.google.com/jsapi">
</script>
<script>
    // Load jQuery
    google.load("jquery", "1");

    google.setOnLoadCallback(function() {
        $("#search_form")
            .submit(function() {
                alert("Submitted. Value= " + $("input:first").val());
                return false;
        });

        $("#keywords")
            .focus(function() {
                if ($(this).val() == 'Search') {
                    $(this)
                    .removeClass('inputblank')
                    .val('');
                }
            })
            .blur(function() {
                if ($(this).val() == '') {
                    $(this)
                    .addClass('inputblank')
                    .val('Search');
                }
            });
    });
</script>

这就是HTML:

<form id="search_form">
    <fieldset>
        <legend>Search the site</legend>
            <label for="keywords">Keywords:</label>
        <input id="keywords" type="text" class="inputblank" value="Search"/>
    </fieldset>
</form>

我希望这足以使您对GAJAXLibs和jQuery产生兴趣。

使用jQuery Form Notifier -它是最流行的jQuery插件之一，并且不会遭受其他jQuery建议的错误(例如，你可以自由地设置水印样式，而不用担心它会被保存到数据库中)。

jQuery水印直接在表单元素上使用单一的CSS样式(我注意到应用于水印的CSS字体大小属性也会影响文本框——这不是我想要的)。加上jQuery水印是你可以拖拽文本到字段(jQuery表单通知不允许这一点)。

另一个由其他人建议(在digitalbrush.com)，会意外地提交水印值到您的表单，所以我强烈建议反对它。

您可以使用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">

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