下面是一个带有谷歌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产生兴趣。

前段时间我在我的网站上发布了一个解决方案。要使用它，请导入一个.js文件:

<script type="text/javascript" src="/hint-textbox.js"></script>

然后用CSS类hintTextbox注释任何你想要有提示的输入:

<input type="text" name="email" value="enter email" class="hintTextbox" />

更多的信息和例子可以在这里找到。

简单的Html 'required'标签是有用的。

<form>
<input type="text" name="test" id="test" required>
<input type="submit" value="enter">
</form>

它指定在提交表单或按submit按钮之前必须填写输入字段。 这里有一个例子

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

 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引用一样简单。

另一种选择，如果你想让这个特性只适用于较新的浏览器，可以使用HTML 5的占位符属性提供的支持:

<input name="email" placeholder="Email Address">

在没有任何样式的情况下，在Chrome中看起来是这样的:

你可以在这里和HTML5的CSS占位符样式中尝试演示。

一定要检查该特性的浏览器兼容性。Firefox的支持是在3.7中添加的。Chrome浏览器没问题。Internet Explorer只在10中添加了支持。如果你的目标浏览器不支持输入占位符，你可以使用jQuery插件jQuery HTML5占位符，然后添加以下JavaScript代码来启用它。

$('input[placeholder], textarea[placeholder]').placeholder();