HTML 크롬 자동완성 끄기

Chrome 브라우저에서 input 필드의 자동완성 기능을 비활성화하는 방법입니다.

기본 방법

<!-- 방법 1: autocomplete="off" -->
<input type="text" autocomplete="off">

<!-- 방법 2: autocomplete="no" (일부 브라우저) -->
<input type="text" autocomplete="no">

<!-- 방법 3: 새로운 비밀번호 암시 -->
<input type="password" autocomplete="new-password">

form 전체에 적용

<form autocomplete="off">
    <input type="text" name="username">
    <input type="password" name="password">
    <button type="submit">로그인</button>
</form>

Chrome에서 확실하게 끄기

<!-- Chrome은 autocomplete="off"를 무시할 수 있음 -->

<!-- 방법 1: 랜덤 값 사용 -->
<input type="text" autocomplete="nope">
<input type="password" autocomplete="new-password">

<!-- 방법 2: readonly 후 focus시 해제 -->
<input type="text" readonly onfocus="this.removeAttribute('readonly');">

<!-- 방법 3: 숨겨진 더미 필드 -->
<input type="text" style="display:none">
<input type="password" style="display:none">
<input type="text" name="username">
<input type="password" name="password">

autocomplete 속성 값

값설명
off자동완성 끄기
on자동완성 켜기
new-password새 비밀번호 (저장 안함)
current-password현재 비밀번호
one-time-code일회용 코드 (OTP)
username사용자명
email이메일
tel전화번호
name이름

JavaScript로 제어

// jQuery
$("input").attr("autocomplete", "off");

// Vanilla JS
document.querySelectorAll("input").forEach(function(el) {
    el.setAttribute("autocomplete", "off");
});

// 동적으로 생성된 input에도 적용
$(document).on("focus", "input", function() {
    $(this).attr("autocomplete", "off");
});

특정 필드별 자동완성

<!-- 주소 자동완성 -->
<input type="text" autocomplete="street-address">
<input type="text" autocomplete="postal-code">
<input type="text" autocomplete="country">

<!-- 신용카드 자동완성 -->
<input type="text" autocomplete="cc-number">
<input type="text" autocomplete="cc-exp">
<input type="text" autocomplete="cc-csc">

CSS로 자동완성 스타일 제거

/* Chrome 자동완성 배경색 제거 */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset;
    box-shadow: 0 0 0 1000px white inset;
}

input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}