placeholder兼容

//判斷瀏覽器是否支持 placeholder屬性  
function isPlaceholder(){  
    var input = document.createElement('input');  
    return 'placeholder' in input;  
} 

if(!isPlaceholder()){  //不支持placeholder 用jquery來完成  
    $("input").not("input[type='password']").each(function(){//把input綁定事件 排除password框  
        if($(this).val()=="" && $(this).attr("placeholder")!=""){  
            $(this).val($(this).attr("placeholder"));  
            $(this).focus(function(){  
                if($(this).val()==$(this).attr("placeholder")) $(this).val("");  
            });  
            $(this).blur(function(){  
                if($(this).val()=="") $(this).val($(this).attr("placeholder"));  
            });  
        }  
    });  
    //對password框的特殊處理1.建立一個text框 2獲取焦點和失去焦點的時候切換  
    var pwdField    = $("input[type=password]");  
    var pwdVal      = pwdField.attr('placeholder');  
    pwdField.after('<input id="pwdPlaceholder" type="text" value='+pwdVal+' autocomplete="off" />');  
    var pwdPlaceholder = $('#pwdPlaceholder');  
    pwdPlaceholder.show();  
    pwdField.hide();  
      
    pwdPlaceholder.focus(function(){  
        pwdPlaceholder.hide();  
        pwdField.show();  
        pwdField.focus();  
    });  
      
    pwdField.blur(function(){  
        if(pwdField.val() == '') {  
            pwdPlaceholder.show();  
            pwdField.hide();  
        }  
    });                
}        
 
</script>
相關文章
相關標籤/搜索