HTML 5 <input> placeholder 属性

<form action="demo_form.asp" method="get">

  <input type="search" name="user_search" placeholder="Search W3School" />

  <input type="submit" />

</form>

placeholder 属性提供可描述输入字段预期值的提示信息（hint）。

该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

注释：placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。
placeholder 属性是 HTML5 中的新属性。

以上是html的新特性

也可以使用js来实现上面的功能：

(function($){

    

$.fn.disappearDefault=function(options){

    var opts=jQuery.extend({},jQuery.fn.disappearDefault.defaults,options);

    $(this).val(opts.vals);

    $(this).css({color:opts.defaultColor});    

    $(this).focus(function(){

        if($(this).val()==opts.vals){

            $(this).val('');

        }else {

                return false;    

        }

        $(this).css({color:opts.color});

    });

    $(this).blur(function(){

        if(opts.showDefault){

            if($(this).val()==''){

                $(this).val(opts.vals);

                $(this).css({color:opts.defaultColor});    

            }

        }

    });

}

})(jQuery);

$.fn.disappearDefault.defaults={

    

vals:"标签用逗号或空格隔开",

defaultColor:"#999",

color:"#333",

showDefault:false

}

使用如下：

$('.companyname').disappearDefault({

vals:"请输入公司名称",

defaultColor:"#cbcbcb",    

color:"#4d4d4d",

showDefault:true

});