크롬 자동완성 로직이해 & 처리 꼼수

 

<input type="text" id="A">
<input type="password" id="B">

위와 같은 HTML 이 있다고 하면 

크롬 자동완성은 화면랜딩이 끝난 시점에(중간에 AJAX 처리를 해도 랜딩 한것으로 간주)

랜딩된 페이지 맨처음 input password(id="B")을 찾고 바로전 input text (id="A") 에 자동으로 데이터를 삽입한다. 

데이터가 자동으로 삽입되는 태그 상단에 아래와 같이 입력해주면 자동완성을 방지할수 있다.

<!-- 자동완성 방지용  -->
<input type="text" style="width:0px;height:0px;position: absolute;">
<input type="password" style="width:0px;height:0px;position: absolute;">
<!-- 자동완성 방지용  -->