크롬 비밀번호 자동완성 비활성화

프로젝트 테스트 중에 자꾸 상관없는 input 태그에

크롬에서 저장한 아이디와 비밀번호가 입력되어 alert가 띄워지는 오류가 발생했다.

 

사용자가 등록 폼에서 input 부분을 채우면 정규식 검사를 통해 경고창이 띄워지는 부분인데

페이지 진입 시 자동으로 input이 채워지면서 inputHandler가 동작했다.

console.log(formInfo);를 찍으면 아무것도 없다고 나오고, inputHandler에서 e.target.value를 찍어보면 값이 있고... 

 

정작 Input에는 값이 안보이고 한참 애를 먹다가 크롬 비밀번호 자동 완성 때문이라는 사실을 알아챘다.

 

• 원인 : input에 type="password"인 경우에 종종 발생함
• 해결 방법 : 기존 input 위에 훼이크 마냥 input을 하나 더 만들어서 거기에 자동완성 텍스트가 들어가도록 한다.
  이때 훼이크용 input이 display: none; or visible: hidden;이면 안된다고 한다. 그래서 width: 0; height: 0;으로 처리했다.