[CSS] Input 태그 > 자동완성 해제 및 입력 기록 제거

[ html ] Input 태그의 자동완성 기능 해제하기, input 입력 기록 제거

---

react-datePicker 라이브러리를 사용한 Calendar의 버전 2를 만들면서 자동완성 기능을 없애는 방법에 대해 찾아보게 되었다. 생각보다 어렵지 않아서 정리를 하지 않을까 하다가 미래의 내가 언제든 지 쉽게 찾아볼 수 있도록 간단하게 정리하였다.😎 위 블로그에서 2가지 방법을 참고하여 현재 만들고 있던 기능에 적용하였다.

 

첫 번째 방법

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

autoComplete="off"라는 속성을 input 태그에 추가해주면 input 태그의 자동완성 기능을 해제할 수 있다고 한다.

 

혹여나 외부 라이브러리를 사용해서 input 태그에 직접적으로 authComplete 속성을 사용할 수 없는 경우, 아래처럼 form 태그를 사용하면 된다.

 

두 번째 방법

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

form 태그를 사용하면 form 태그 안에 있는 input 태그의 자동완성 기능을 비활성화시킬 수 있다고 한다.

 

핵심은 authComplete 속성을 사용하면 자동완성 기능을 손쉽게 해제할 수 있다는 것이다.