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