Input 友好提示 用Label遮住 Input 支持ie,火狐

点击效果

 

 

/* 
 * Input 友好提示
 * 使用方法
 * 可使用 label|span 等内联元素
 * tipInput 为 提示标签属性
 * nostyleInput 为 Input的 提示属性
 * <label class="tipInput" style="display:none;"> 请输入姓名</label>
 * input 加入 nostyleInput
 * add by Jason.zhang 2011.8.4
 */
/**
 * 对象复制请使用clone
    var authType = $("div.classname:first");
    var newAtt = authType.clone(true,true);
    newAtt.appendTo(authType.parent());//添加到最后
    newAtt.find('input[name="name[]"]').val('');//清楚数据
 */

$(function(){
    $('.nostyleInput').each(function(){
        if($(this).val()!=="") {                    
           $(this).prev().css('display','none');
        }
        else
        {                        
            $('.tipInput').css({ position:'absolute',color:'#ccc',padding:'1px','display':'inline'});
        }
    });

    $('.tipInput').bind('click',function(){
        $(this).next().focus();
    });

});
function focusin() {            
$(this).prev().hide();
$(this).parent().addClass('focus');
}
function focusout() {            
if($(this).val() === "") {
  $(this).prev().css({ position:'absolute',color:'#ccc',padding:'1px','display':'inline'});
}
$(this).parent().removeClass('focus');

}        
$('.nostyleInput').focus(focusin);
$('.nostyleInput').blur(focusout);