文本作为文本框输入的占位符？

Question

我注意到在某些网站如http://academia.edu/,注册表单在其文本输入字段中有一些"占位符".这样在文本框中,文本框内没有标签,而是一个相当轻微的字体"名字"字样.

使用Firebug进行调查时,我看到以下代码:

<input class="standard_text magic-default magic-default-on" id="user_first_name" name="user[first_name]" size="30" type="text" value="First Name">

看起来场景后面会发生一些"神奇"的javascript.但由于我还不熟悉javascript调试,我无法追查他们是如何做到这一点的.

有谁知道如何产生这种效果？

Answer 1

对于现代浏览器,您可以使用HTML5 placeholder属性.

这将实现您在没有任何Javascript之后的结果,并且将在旧版浏览器中扩展(不会做任何事情).

<input placeholder="First Name">

要在旧版浏览器中使用它,您可以包含一些jQuery:

$('input:text').focus(function(){
    if ( $( this ).val () === $( this ).attr ( 'placeholder' ) ) { 
      $(this).val('');
    }
}).blur(function(){
    if($(this).val() == "")
    {
        $(this).val($(this).attr('placeholder'))
    }
}
);

工作实例