[JS] FireFox에서의 autocomplete="off" 사용

Intro

input type을 radio로 하여 각 버튼 별로 보여지는 content(리스트)가 달랐다.

예를들어 3개의 radio button(type:1,2,3)이 있다고 하자.
default를 type 1으로 하였다. 따라서 refresh 시 type 1으로 화면이 표출되어야 한다.

내가 type 2에서 어떻한 기능을 수행하고 새로고침을 했는데 content는 type 1으로 잘 처리되었지만 radio checked는 여전히 type 2였다.

나는 항상 로컬테스트를 FireFox로 한다. 그래서 이게 문제가 될줄은 몰랐다😫

혹시 몰라 브라우저 테스트를 해보았더니... IE와 Chrome은 radio button과 content가 기본값인 type 1으로 아주 잘 refresh되고 있었다..!😡😡😡

Solution

FireFox에서는 사용자가 다시 로드할 때 입력한 데이터를 유지하는 기능을 제공한다는 사실을 처음 알게되었다.

그래서 문제가 일어나는 input 태그에 autocomplete="off"를 추가해주면 된다

<input type="text" autocomplete="off">

혹은 jQuery에서는

$('input,textarea').attr('autocomplete', 'off');

내가 사용한 법은 form 태그가 input 보다 상위에 있기 때문에 form에 사용을 하였다.

<form method="post" autocomplete="off">...</form>

참고

https://stackoverflow.com/questions/7377301/firefox-keeps-form-data-on-reload