jquery에도 불구하고 크롬 (Firefox는 아님) 자동 완성은 라벨 텍스트가 겹칩니다.

Question

'사용자 이름'과 '비밀번호'라벨이 포함 된 로그인 양식을 만들었습니다. 아래 jquery는 사용자가 필드.

$(document).ready(function(){ 

$("form.login input") 
    .bind("focus.labelFx", function(){ 
    $(this).prev().hide(); 
    }) 
    .bind("blur.labelFx", function(){ 
    $(this).prev()[!this.value ? "show" : "hide"](); 
    }) 
    .trigger("blur.labelFx"); 

}); 

과 HTML :

<form method="post" id="login-form" action="/accounts/login/"> 
    <div class="input-wrapper"> 
     <label for="id_username">Username</label> 
     <input id="id_username" size="30" type="text" name="username"> 
    </div> 
</form> 

문제는 크롬의 자동 완성 내가 수동으로 초점을 때까지 나에게 이상하게 중복 텍스트를주고, 그것을 잡을 수있는이 전대 전에 사용자 이름과 암호를로드 할 것으로 보인다이다 . Firefox의 이 아니고에 문제가 있습니다. 그림 : http://imgur.com/kJRLa

자동 완성 된 데이터로 인해 레이블이 숨겨 지도록이 문제를 해결하는 방법에 대한 제안 사항이 있으십니까?

Answer 1

크롬 (및 다른 브라우저의 Google 툴바 자동 완성)은 양식 채우기 행위로 인해 웹에 적합하지 않은 시민입니다. 양식 필드를 채우면 정상적인 이벤트가 실행되지 않습니다. 자동 완성을 사용 중지하지 않으려면 자동 완성이 발생했는지 정기적으로 확인하는 시간 초과 이벤트를 설정할 수 있습니다.

this SO question의 첫 번째 대답은 (질문 작성자가) 한 가지 해결책입니다.

$(window).load(function(){ 
    if($('input:-webkit-autofill')){ 
     //Remove Label Function 
    }   
}); 

당신이 $(window).load(function(){});

에 코드를 삽입해야합니다하지

$(document).ready(function(){}) 

Answer 2

Benjamin Miles tutorial을 읽은 후 난 당신과 같이 jQuery로 자동 완성의 Chromes를 검색 할 수 있습니다 발견 다음을 사용하십시오.

var wait = window.setTimeout(function(){ 
//Pseduo code 
label.style.display = "none"; 
},5); 

5 밀리 초가 지나면 코드가 실행되고 레이블이 숨겨집니다.

Answer 3

당신은 수를 :