Input, form 태그에 브라우저의 자동 완성 기능 해제하는 방법, 패스워드 완성 못하게 막기

만약 사이트를 방문하여 로그인이나 어떤 정보를 입력하려고 하는데 이미 자동으로 글이 저장되었다면? 그리고 그 내용이 보안이나 개인적인 정보라면 이 기능을 원하지 않을텐데도... 아래는 자동 완성 기능 사용하지 않는 방법입니다.

[ 1 ] 자동 완성 기능은 언제 그리고 왜 사용되나...

; 브라우저는 우리가 입력하는 입력폼, input이나 textarea에 입력할 글을 자동으로 저장하게 해주는 자동 완성 기능을 기본으로 가지고 있습니다. 그렇기 때문에 기존에 입력된 글을 앞에 몇글자만 입력해도 모두 입력할 수 있도록 도와줍니다. 매우 편리한 기능이지요. 하지만 이 기능이 항상 필요한 것은 아닙니다. 보안이나, 개인적인 정보일 경우 자동완성 기능은 꼭 꺼두어야 할 필요가 있습니다.

[ 2 ] 자동 완성 기능 사용하지 않도록 설정

; 사용할 태그에서 autocomplete 속성을 사용합니다. input 또는 textarea 태그안에 자동 완성 기능을 막는 이 속성을 넣어만 주면됩니다. 아래의 예제를 확인하세요.

! autocomplete에 사용 가능한 옵션

1. on // 자동완성 기능 사용 (Default 값)
2. off // 자동완성 기능 사용 중지


위 예제는 개별 입력폼에 대하여 자동완성을 막는 부분입니다. 만약에 개별항목이 아닌 입력폼 전체에 자동완성을 금지하려면 어떻게 할까요? 상위 요소인 form 태그에 autocomplete 속성을 사용하여 가능합니다.



이처럼 autocomplete 속성이 보이시죠? 그렇게 함으로써 브라우저의 특징 중 하나인 자동완성 기능을 해제시킬 수가 있습니다. :) 참고로 위에 사용된 다른 속성에 대한 설명은 아래를 보세요.

i. maxlength : 입력 최대값을 설정할 수 있음
ii. type : 입력되는 텍스트를 결정함. password 값을 넣는 경우 실제 입력값을 화면에 보여줄 때만 별표(*)로 변환시킴
iii. placeholder : 아무 입력 값이 없을 경우 기본으로 이 입력 폼이 어떤데에 쓰이는지 알려줌
iv. name : Form 태그를 통해 다른 페이지로 값을 전송할 경우 name 속성을 이용해 받을 수 있음


# 크롬에서 정상 동작하지 않는 경우
크롬에서 autocomplete이 정상동작하지 않습니다. 그 이유는 구글은 autocomplete 속성을 조작하는 행위가 모든 사용자에게 제공되는 것은 좋지 않다고 판단하기 때문입니다. 이를 해결하기 위한 방법이 존재하지만 현재로서는 스크립트를 이용해야만 가능한 것 같습니다. 크롬 브라우저는 제외하는 것이 좋겠습니다.