input태그의 autocomplete="off"가 작동하지 않을 때

<input type="text" placeholder="검색" autocomplete="off" value="">

 

위 처럼 type이 text이고 autocomplete속성을 off해놨으나 계정정보가 자동완성될때가 있다.

원인은 브라우저가 autocomplete="off"를 무시하기때문이라고 한다.

 

id 속성값을 넣어도봤고 autocompete값을 none 또는 false로도 바꿔봤으나 해결되지않았다. 

 

작동되었던 해결방법은

1. form 태그안에 묶기

<form>
	<input type="text" placeholder="검색" autocomplete="off" value="">
</form>

바로 해결되었으나, 여러가지 부차적인 문제가 생겼다(엔터키가 작동한다던지)

 

2. 대신 인식시킬 input태그 만들기

<input type="text" placeholder="검색" autocomplete="off" value="">
<input type="text" style="opacity:0; position:absolute; top:-100px;">

위처럼 대신 인식시킬 input태그를 하나 더 만들고 안보이도록 만들었다.

해결되었으나 부차적인 문제가 생길 수 있기 때문에 추천하지않는다.

 

3. autocomplete 속성을 one-time-code로 바꾸기

<input type="text" placeholder="메뉴검색" autocomplete="one-time-code" value="">

위처럼 autocomplete 속성을 one-time-code로 바꿔줬더니 해결되었다.

제일 깔끔하고 문제없는 방법