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>
posted @ 2016-08-18 19:46  Xile萨玛  阅读(129)  评论(0)    收藏  举报