[JavaScript] 크롬 Input 자동 완성을 방지하는 꼼수

크롬 브라우저는 input 태그를 기준으로  아이디 자동완성을 지원하는 편리한 기능이 있습니다. 

하지만 뷰딴에서 검색이나 의도치 않은 필드에 자동완성이 생성되어 오히려 불편할 때가 있습니다.

오늘은 자동완성을 제거하는 간단한 꼼수 하나를 정리해봅니다.

간단하지만 해두면 편리하답니다.

 

현상

검색 input에 크롬 브라우저가 자동완성을 해서 값이 뜨네요..

해결

더미 input을 하나 만들어서 onload 후 바로 삭제해주어 해결해봅니다.

- view :  더미 input은 제일 마지막에 넣어주셔야 인식 엔진이  autocomplete 해주기 용의 합니다. 최하단에 아래 input을 생성해줍니다. 이때 type를 hidden이나 style로 display:none; 등을 하면 인식이 안되니 그냥 노출시킵니다.

<input type="text" name="dummy" autocomplete="on" >

 

-  js : 제이쿼리를 활용하여 해당 부분을 없애주면 끝!

jQuery(function ($) {
	
	//2022.05.02  크롬 자동완성 방지를 위한 로직 처리 
	$('input[name=dummy]').hide();
    })

결과  

다음과 같이 페이지가 로드됨과 동시에 자동완성된 input 이 사라지기에 귀찮은 자동완성을 해결했습니다.

사라진 자동완성 id를 확인 가능합니다

 

그래도 안된다면..?

 

html 태그 렌더링시 자동완성하는 태그인식을 강제해서 이를 dummy 에 넣어 처리한다.

<!--remove autocomplete -->
<input style="display:none" aria-hidden="true">
<input type="password" style="display:none" aria-hidden="true">
<input type="text" name="dummy"  autocomplete="false" required>
<input type="password" name="password" autocomplete="new-password">

/*
  ## remove autocomplete ##
  자동완성 방지를 위한 로직 처리 
  chrome, safari 브라우저 의 경우 자동완성이 강제로 입력되는 현상이 있다.
  html문서내 최하단에 password input을 우선순위로 인식하니 해당 dummy에 강제로 완성시켜 view에서 제거합니다.
  - 2022.12.28 by SeongMin, kwon
*/

$('input[name=dummy]').hide();
$('input[name=password]').hide();