$('input[value="text"]').focus(function(){ 
if ($(this).attr('class')=='hint') 
{ 
   $(this).removeClass('hint'); 
   $(this).val(''); 
}
});

$('input[value="text"]').blur(function(){
  if($(this).val() == '')
  {
    $(this).addClass('hint');
    $(this).val($(this).attr('title'));
  } 
});

<input type="text" value="" title="Default Watermark Text">

这就是所谓的文本框水印，它是通过JavaScript完成的。

http://naspinski.net/post/Text-Input-Watermarks-using-Javascript- (IE-Compatible) . aspx

或者如果你使用jQuery，一个更好的方法:

http://digitalbush.com/projects/watermark-input-plugin/ 或code.google.com/p/jquery-watermark

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

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

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

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

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

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

 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");
        }
    });
});

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

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

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

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

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