Chrome은 자동 완성 =“꺼짐”을 무시합니다


444

태그 상자 드롭 다운을 사용하는 웹 응용 프로그램을 만들었습니다. 이는 Chrome 브라우저 (버전 21.0.1180.89)를 제외한 모든 브라우저에서 효과적입니다.

input필드와 속성이 있는 form필드 에도 불구하고 autocomplete="off"Chrome은 필드에 대한 이전 항목의 드롭 다운 기록을 표시해야하므로 태그 박스 목록을 삭제합니다.


10
기술적으로이 질문은 "이 질문은 이미 여기에 대한 답변이 있습니다"라고 언급되기 약 5 개월 전에 요청되었습니다. 저것은 이것 뒤에 나온 복제품입니다.
user3071434

답변:


318

최신 정보

Chrome에서 style="display: none;"또는 style="visibility: hidden;속성을 무시하는 것 같습니다 .

다음과 같이 변경할 수 있습니다.

<input style="opacity: 0;position: absolute;">
<input type="password" style="opacity: 0;position: absolute;">

내 경험상 Chrome은 첫 번째 <input type="password">와 이전 만 자동 완성합니다 <input>. 그래서 나는 추가했다 :

<input style="display:none">
<input type="password" style="display:none">

의 상단 <form>과 사건이 해결되었습니다.


54
이것은 더 이상 작동하지 않습니다 크롬 40이 솔루션을 작동하지 않습니다
user881703

8
뿐만 아니라 이것은 추한,하지만 난 아직 할 수 에 대한 설명 찾을 왜의 질문을?
Augustin Riedinger

4
표시가 없으면 Chrome에서 무시하는 것 같습니다. 아무것도 사용되지 않으므로 절대 위치를 지정하여 시야 밖으로 필드를 옮겼습니다 ...
Christoph Leiter

1
display: none;자동 완성에 대한 요소는 없습니다.
Sandun Perera

276

사용자 이름 (또는 이메일) 및 비밀번호 자동 완성 방지 :

<input type="email" name="email"><!-- Can be type="text" -->
<input type="password" name="password" autocomplete="new-password">

필드 자동 완성 방지 ( 작동하지 않을 수 있음 ) :

<input type="text" name="field" autocomplete="nope">

설명:

autocomplete<input>에도 불구하고 여전히 작동 autocomplete="off"하지만 off과 같은 임의의 문자열로 변경할 수 있습니다 nope.


필드의 자동 완성을 비활성화하는 다른 "솔루션" (올바른 방법은 아니지만 작동) :

1.

HTML :

<input type="password" id="some_id" autocomplete="new-password">

JS (온로드) :

(function() {
    var some_id = document.getElementById('some_id');
    some_id.type = 'text';
    some_id.removeAttribute('autocomplete');
})();

또는 jQuery를 사용하여 :

$(document).ready(function() {
    var some_id = $('#some_id');
    some_id.prop('type', 'text');
    some_id.removeAttr('autocomplete');
});

2.

HTML :

<form id="form"></form>

JS (온로드) :

(function() {
    var input = document.createElement('INPUT');
    input.type = 'text';
    document.getElementById('form').appendChild(input);
})();

또는 jQuery를 사용하여 :

$(document).ready(function() {
    $('<input>', {
        type: 'text'
    }).appendTo($('#form'));
});

jQuery를 사용하여 둘 이상의 필드를 추가하려면 다음을 수행하십시오.

function addField(label) {
  var div = $('<div>');
  var input = $('<input>', {
    type: 'text'
  });
  
  if(label) {
    var label = $('<label>', {
      text: label
    });
    
    label.append(input);
    div.append(label);    
  } else {
    div.append(input);    
  }  
  
  div.appendTo($('#form'));
}

$(document).ready(function() {
  addField();
  addField('Field 1: ');  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form"></form>


다음에서 작동합니다.

  • 크롬 : 49+

  • Firefox : 44+


autocomplete = ""이 부울을 받아 들여야한다면 어떻게 대답이 실제로 자동 완성을 막을 수
있을까요?

암호 필드에 할당 할 때 autocomplete = "new-password"는 크롬으로 작동했습니다. 양식의 autocomplete = "off"가 없습니다.
Second2None

2
가장 중요한 (그리고 나를 위해 일한 유일한 것은) <input> 필드의 ID 및 Name 속성에 "Username"또는 "Password"가 포함되어 있지 않은지 확인하는 것이 었습니다. 이것은 autocomplete = "off"에서 나를 위해 모든 자동 완성을 효과적으로 중지했습니다.
GONeale

new-password실제로 비밀번호가 아닌 숨겨진 입력에 대한 좋은 캐치입니다.
antongorodezkiy

Lol autocomplete="nope"은 양식 필드에 추가하지 않는 한 실제로 나를 위해 일했습니다. 두 필드 중 하나에 사용할 수 있고 해당 필드는 자동 완성되지 않지만 다른 필드는 여전히 자동 완성되지만 두 필드에 모두 넣으면 자동 완성이 다시 시작됩니다.
PrintlnParams

147

태그 autocomplete="off"에 있지 않으면 Chrome이 이제 무시합니다 <form autocomplete="off">.


React에는 'autoComplete = off'를 사용하십시오.
zero_cool

Chrome에서 이러한 변경 을 한 이유에 대한 설명 은 다음 답변을 참조하십시오. stackoverflow.com/a/39689037/1766230- 개발자보다 사용자를 우선 순위로 둡니다.
누가

12
autocomplete = "off"를 사용하는 유효한 이유를 Chrome 팀에 제공하려면 다음과 같이하십시오. bugs.chromium.org/p/chromium/issues/detail?id=587466
Chris

@Digggid Chrome 71은 속성을 무시하지 않지만 경우에 따라 "off"값을 무시합니다. "국가"와 같은 값을 사용하면 여전히 효과가 있습니다.
Burak

1
상충되는 보고서가 있으므로 위의 내용을 명확하게 설명하십시오. 양식 태그에 autocomplete = "off"를 추가하고 개별 입력 태그에 autocomplete = "new-password"를 추가하십시오. Chrome에서 작동 75
AndyP9

83

현대적 접근

간단히 입력 readonly하고 초점을 맞추고 제거하십시오. 이것은 매우 간단한 접근 방식이며 브라우저는 readonly입력을 채우지 않습니다 . 따라서이 방법은 허용되며 향후 브라우저 업데이트로 덮어 쓰지 않습니다.

<input type="text" onfocus="this.removeAttribute('readonly');" readonly />

다음 부분은 선택 사항입니다. 입력처럼 보이지 않도록 입력에 맞게 스타일을 지정하십시오 readonly.

input[readonly] {
     cursor: text;
     background-color: #fff;
}

작업 예


50
@Basit-그리고 그것이 내가 그것을 불렀던 이유 modern approach입니다. 전 세계 사용자의 1 % 미만이 자바 스크립트를 사용 중지했습니다. 솔직히 말해서, 대다수의 웹 사이트가 Javascript에 의존 할 때 이러한 소규모 청중을 수용하는 사람은 누구나 가치가 없습니다. 지금은 오랫동안 웹 사이트를 개발해 왔으며, 내 사이트의 100 %가 자바 스크립트를 사용하고 많이 의존합니다. 사용자가 자바 스크립트를 사용 중지 한 경우 내 문제가 아니라 자체 문제와 선택입니다. 웹 사이트를 끈 상태에서 웹 사이트의 90 % 이상을 방문하거나 사용할 수 없습니다. 귀하의 공감 비는 완전히 관련이 없습니다.
Fizzix

19
현재는 49 세에서 작동하지 않습니다. Chrome '개발자'는 stackoverflow 솔루션을보고 제거하고 있습니다.
puchu

7
2015 년 9 월의 답변은 기본적으로 아래 2014 년 11 월 답변의 사본입니다.
dsuess

5
2019-작동하지 않습니다.
user2060451

1
이 스크린 리더를 끊을
그렉

80

안정적인 해결 방법을 위해이 코드를 레이아웃 페이지에 추가 할 수 있습니다.

<div style="display: none;">
 <input type="text" id="PreventChromeAutocomplete" 
  name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>

Chrome은 다른 자동 완성 값과 함께 양식에 하나 이상의 다른 입력 요소가있는 경우에만 autocomplete = off를 고려합니다.

비밀번호 입력란에서는 작동하지 않으며 Chrome에서 매우 다르게 처리됩니다. 자세한 내용은 https://code.google.com/p/chromium/issues/detail?id=468153 을 참조하십시오.

업데이트 : 버그는 Chromium 팀에서 2016 년 3 월 11 일에 "수정하지 않음"으로 종료했습니다. 자세한 설명은 원래 제출 한 버그 보고서의 마지막 주석을 참조하십시오 . TL; DR : Chrome에서 자동 완성을 수행하지 않도록 autocomplete = "new-street-address"와 같은 시맨틱 자동 완성 속성을 사용하십시오.


2
@Jonathan Cowley-Thom : 해결 방법이 담긴 테스트 페이지를 사용해보십시오. 에 hub.securevideo.com/Support/AutocompleteOn , 당신은 크롬 자동 완성 제안을 볼 수 있습니다. 그런 다음 hub.securevideo.com/Support/AutocompleteOff 에서 동일한 항목을 시도하십시오 . Chrome 자동 완성 제안이 표시되지 않아야합니다. 방금 Chrome 45.0.2454.101m 및 46.0.2490.71m에서 이것을 테스트했으며 예상대로 작동했습니다.
JT Taylor

이 문제에 대한 추가 업데이트 : 방금 Chrome 팀으로부터이 문제가 해결되었다는 알림을 받았습니다. 따라서이 해결 방법이 더 이상 필요하지 않게되기를 바랍니다.
JT Taylor

위의 내 게시물 참조 : "비밀번호 필드에서는 작동하지 않습니다. Chrome에서는 매우 다르게 처리됩니다. 자세한 내용은 code.google.com/p/chromium/issues/detail?id=468153 을 참조하십시오."
JT Taylor

46

글쎄, 파티에 조금 늦었지만 autocomplete작동 방식 과 작동 방식에 대한 약간의 오해가있는 것 같습니다 . HTML 사양에 따라 사용자 에이전트 (이 경우 Chrome)는 다음을 무시할 수 있습니다 autocomplete.

https://www.w3.org/TR/html5/forms.html#autofilling-form-controls:-the-autocomplete-attribute

사용자 에이전트는 사용자가 요소의 자동 완성 필드 이름을 무시하도록 허용 할 수 있습니다. 예를 들어 페이지 작성자의 반대에도 불구하고 값을 기억하고 미리 채워지거나 항상 "꺼짐"으로 기억하지 못하도록 "off"에서 "on"으로 변경 가치. 그러나 사이트의 환경 설정에 관계없이 모든 값을 항상 기억하는 경우 사용자에게 중요한 보안 영향이 있으므로 사용자 에이전트는 자동 채우기 필드 이름을 "off"에서 "on"또는 다른 값으로 무시할 수 없습니다.

따라서 Chrome의 경우 개발자는 본질적으로 "사용자가 원하는지 여부를 원하는대로 결정할 수 있도록 사용자에게 맡길 것입니다" autocomplete 대로 작업 입니다. 원하지 않는 경우 브라우저에서 활성화하지 마십시오"라고 말합니다. .

그러나 이것은 내 취향에 따라 약간 열심 인 것처럼 보이지만 그것이 그 방식입니다. 또한이 사양은 이러한 이동의 잠재적 보안 영향에 대해 설명합니다.

"off"키워드는 컨트롤의 입력 데이터가 특히 민감 함을 나타냅니다 (예 : 핵무기의 활성화 코드). 또는 재사용되지 않는 값 (예 : 은행 로그인의 일회성 키)이므로 사용자는 UA를 사용하여 미리 채울 수있는 대신 매번 데이터를 명시 적으로 입력해야합니다. 그를위한 가치; 또는 문서가 자체 자동 완성 메커니즘을 제공하며 사용자 에이전트가 자동 완성 값을 제공하지 않도록합니다.

그래서 다른 모든 사람들과 같은 좌절감을 경험 한 후에 저에게 맞는 해결책을 찾았습니다. autocomplete="false"정답 은 정답 과 비슷 합니다.

모질라 기사는이 문제에 대해 정확히 말합니다.

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

경우에 따라 autocomplete 속성이 off로 설정되어 있어도 브라우저는 자동 완성 값을 계속 제안합니다. 이 예기치 않은 동작은 개발자에게 매우 어려울 수 있습니다. 실제로 완료를 강제하지 않는 트릭은 속성에 임의의 문자열을 할당하는 것입니다

따라서 다음 코드 작동 해야 합니다.

autocomplete="nope"

그리고 다음과 같은 각각의 것들도 마찬가지입니다 :

autocomplete="false"
autocomplete="foo"
autocomplete="bar"

내가 볼 수있는 문제는 브라우저 에이전트가 autocomplete속성 을 배우고 다음에 양식을 볼 때 적용 할만 큼 똑똑 할 수 있다는 것입니다. 그렇게하면 여전히 문제를 해결할 수있는 유일한 방법은 동적으로 변경하는 것입니다.autocomplete 은 페이지가 생성 될 때 속성 값 것입니다.

한 가지 언급 할 점은 많은 브라우저가 autocomplete로그인 필드 (사용자 이름 및 비밀번호) 설정을 무시한다는 것 입니다. 모질라 기사에 따르면

이러한 이유로 많은 최신 브라우저는 로그인 필드에 대해 autocomplete = "off"를 지원하지 않습니다.

  • 사이트가 양식에 대해 autocomplete = "off"를 설정하고 양식에 사용자 이름 및 비밀번호 입력 필드가 포함 된 경우 브라우저는 여전히이 로그인을 기억하도록 제안하며, 사용자가 동의하면 다음에 해당 필드를 자동으로 채 웁니다 사용자가이 페이지를 방문합니다.
  • 사이트가 사용자 이름 및 비밀번호 입력 필드에 대해 autocomplete = "off"를 설정하면 브라우저는 여전히이 로그인을 기억하도록 제안하고 사용자가 동의하면 다음에이 페이지를 방문 할 때 브라우저가 해당 필드를 자동으로 채 웁니다.

이것은 Firefox (버전 38부터), Chrome (34부터) 및 Internet Explorer (버전 11부터)의 동작입니다.

마지막으로 속성이 form요소 또는 요소에 속하는지 여부에 대한 약간의 정보 input. 사양에는 다시 대답이 있습니다.

자동 완성 속성이 생략되면 요소의 양식 소유자 자동 완성 속성 상태에 해당하는 기본값이 대신 사용됩니다 ( "on"또는 "off"). 양식 소유자가 없으면 "on"값이 사용됩니다.

그래서. 양식에 입력하면 모든 입력 필드에 적용되어야합니다. 개별 요소에 배치하면 해당 요소에만 적용되어야합니다 (양식에 요소가없는 경우에도). 만약이 autocomplete가 디폴트에 전혀 설정되어 있지 않습니다 on.

요약

autocomplete전체 양식 을 비활성화하려면 :

<form autocomplete="off" ...>

또는 동적으로 해야하는 경우 :

<form autocomplete="random-string" ...>

autocomplete개별 요소 를 비활성화하려면 (서식 설정 여부에 관계없이)

<input autocomplete="off" ...>

또는 동적으로 해야하는 경우 :

<input autocomplete="random-string" ...>

또한 특정 사용자 에이전트는 사용자가 시도한 가장 어려운 시도조차 무시할 수 있습니다 autocomplete.


1
2019-작동하지 않습니다. 버전 76.0
user2060451

1
@ user2060451-작동하지 않는 것은 무엇입니까? 방금 Windows 및 Mac의 76.0.3809.87에서 테스트했습니다. -둘 다 사양에 따라 수행됩니다. 위에서 설명한대로. "작동하지 않습니다"보다 조금 더 많은 설명을 제공 할 수 있다면 도와 드릴 수 있습니다.
훌리건 캣

1
입력 요소 자동 완성을 위해 임의의 문자열을 서버 측에로드하고 서버 측에 설정 한 후 콘솔에서 방금 시도했지만 작동하지 않았습니다. 양식 요소에 autocomplete = "off"를 부여해도 작동하지 않았습니다.
Nuryagdy Mustapayev


29

크롬 버전 (34)는 이제 무시 autocomplete=off, 이 참조 .

이것이 좋은지 나쁜지 에 대한 많은 토론 ? 당신의 견해는 무엇입니까?


7
downvote 죄송합니다 ... 토론 사이트가 아닙니다 (대신 quora 시도). 답변을 제공하지 않습니다. 그래도 링크 주셔서 감사합니다.
commonpike

25

브라우저는 autocomplete = off auto를 신경 쓰지 않거나 잘못된 텍스트 필드에 자격 증명을 채우지 않습니까?

사용자가 암호 필드를 클릭하거나 탭 키를 사용하여 암호 필드를 읽기 전용으로 설정하고 활성화하여 암호를 수정했습니다.

브라우저 자동 완성 수정 : 읽기 전용 및 쓰기 가능 초점 설정 (마우스 클릭 및 필드 탭)

 <input type="password" readonly  
     onfocus="$(this).removeAttr('readonly');"/>

업데이트 : Mobile Safari는 필드에 커서를 설정하지만 가상 키보드는 표시하지 않습니다. 새로운 픽스는 이전과 같이 작동하지만 가상 키보드를 처리합니다.

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

라이브 데모 https://jsfiddle.net/danielsuess/n0scguv6/

// UpdateEnd

그건 그렇고, 더 많은 정보 내 관찰에 대한 :

동일한 양식의 비밀번호 입력란이있을 때 Chrome 및 Safari에서이 이상한 동작이 나타나는 경우가 있습니다 . 브라우저가 저장된 자격 증명을 삽입하기 위해 암호 필드를 찾습니다. 그런 다음 사용자 이름 을 가장 가까운 textlike-input 필드에 자동 입력합니다.이 필드 는 DOM 의 암호 필드 앞에 나타납니다 (관찰로 인해 추측). 브라우저가 마지막 인스턴스이고이를 제어 할 수 없으므로 autocomplete = off조차도 자격 증명 을 잘못된 필드 에 채우지 못하지만 사용자 또는 닉네임 필드는 아닙니다.


2
onfocus를 사용하는 대신 setTimeout을 사용하여 읽기 전용을 지우므로 사용자는 입력이 읽기 전용이고 초점을 맞추지 않습니다.
Hippyjim

23

당신이 사용할 수있는 autocomplete="new-password"

<input type="email" name="email">
<input type="password" name="password" autocomplete="new-password">

다음에서 작동합니다.

  • 크롬 : 53, 54, 55
  • Firefox : 48, 49, 50

자동 완성 문자열이 고정되어 있기 때문에 작동하지 않습니다. 브라우저는 다음에 새 비밀번호를 기억합니다.
단계

23

TL; DR : Chrome에 새 비밀번호 입력이며 이전 비밀번호는 자동 완성 제안으로 제공되지 않는다고 Chrome에 알립니다.

<input type="password" name="password" autocomplete="new-password">

autocomplete="off" 설계 결정으로 인해 작동하지 않습니다. 많은 연구에 따르면 사용자가 브라우저 또는 비밀번호 관리자에 비밀번호를 저장할 수있는 경우 비밀번호를 해킹하는 것이 훨씬 더 길고 어렵다는 것이 밝혀졌습니다.

에 대한 사양 autocomplete 이 변경 되었으며 이제 로그인 양식을 쉽게 자동 완성 할 수 있도록 다양한 값을 지원합니다.

<!-- Auto fills with the username for the site, even though it's email format -->
<input type="email" name="email" autocomplete="username">

<!-- current-password will populate for the matched username input  -->
<input type="password" autocomplete="current-password" />

당신이 경우 하지 않는 이 크롬을 제공 여전히 추측을 시도하고, 그렇게되면 그것은 무시합니다 autocomplete="off".

해결책은 autocomplete비밀번호 재설정 양식에도 값이 존재 한다는 것입니다 .

<label>Enter your old password:
    <input type="password" autocomplete="current-password" name="pass-old" />
</label>
<label>Enter your new password:
    <input type="password" autocomplete="new-password" name="pass-new" />
</label>
<label>Please repeat it to be sure:
    <input type="password" autocomplete="new-password" name="pass-repeat" />
</label>

autocomplete="new-password"플래그를 사용하면 이 사이트에 저장된 비밀번호가 있어도 비밀번호를 추측하지 않도록 Chrome에 지시 할 수 있습니다 .

또한 Chrome은 자격 증명 API를 사용하여 사이트의 비밀번호를 직접 관리 할 수 ​​있습니다.이 API 는 표준이며 아마도 보편적으로 지원 될 것입니다.


5
정말 설득력있는 이유는 아닙니다. 사용자가 무언가를 원한다고해서 그것이 현명한 아이디어라는 의미는 아닙니다. 사용자가 더 편리하다고 생각하기 때문에 응용 프로그램에서 단일 문자 암호를 허용한다고 말하는 것만 큼 나쁩니다. 때로는 보안이 편의보다
우월

Chrome에서 EmailAddress를 채울 것을 주장하는 'ContactNoAlt'라는 입력란이 있습니다. 자동 완성 사용 / 사용 중지가 선호되지만 Chrome이 실행 가능하기 때문에 실용적인 수준에서 해결 방법이 필요합니다. 보다 명확하게 autocomplete = "off"는 표준입니다. 따라서 Chrome 개발자는 표준을 무시할 수 있다고 생각하게됩니다. 언젠가 Chrome에서 다른 HTML 조각이 불편하다고 판단 할 것입니다. IE5 / 6 de-ja-vu와 같은 느낌)
dunxz

저는 크롬 사용자이며이 동작을 원하지 않습니다. 웹 응용 프로그램에만 액세스 할 수 있도록 팝업 상자가 자동 ​​완성되기 전에 묻지도 않았습니다. 일부 비밀번호를 저장 한다고해서 모든 비밀번호를 자동 완성 하는 것은 아닙니다 .
Hippyjim

3
이 답변 (및 Google의 행동)은 당신이 이것을 원할 수도있는 주요 이유 중 하나가 자신의 (예 : 데이터베이스 목록) 자동 완성 행동을 구현하는 것이라는 사실을 무시합니다.
squarelogic.hayden

당신은 크롬에 의해 명백하게 나쁜 결정을 방어하려고합니다. 변경할 수없는 회사 정책을 시행하고 있습니다. 이제 크롬 용 해킹을 삽입해야합니다. 그들은 현재 작동합니다. 그들이 일을 중단하면 회사는 직원의 기본 브라우저를 변경합니다. 이제 동일한 동작을 수행하지만 이후 업그레이드에서 해킹 및 페이지가 손상 될 수 있습니다. 그리고 여기에있는 모든 대답을 보면이 해킹을 사용하는 많은 개발자가 있습니다. 크롬 잘 했어.
Claudiu Creanga

23

임의의 문자를 사용하여 Chrome으로 끝없는 싸움을 해결했습니다. 임의 문자열로 항상 자동 완성을 렌더링하면 아무것도 기억되지 않습니다.

<input name="name" type="text" autocomplete="rutjfkde">

그것이 다른 사람들에게 도움이되기를 바랍니다.


12

Autocomplete="Off" 더 이상 작동하지 않습니다.

"Off"예를 들어, 대신 임의의 문자열을 사용해보십시오.Autocomplete="NoAutocomplete"

도움이 되길 바랍니다.


5
Chrome 73에서 작동하지 않음
just_user

10

크롬이을 무시한 것을 보았습니다 autocomplete="off". 나는 "가짜 입력"을 사용하여 크롬을 속여서 "실제"를 채우는 대신 어리석은 방법으로 그것을 해결했습니다.

예:

<input type="text" name="username" style="display:none" value="fake input" /> 
<input type="text" name="username" value="real input"/>

Chrome은 "가짜 입력"을 채우고 제출시 서버는 "실제 입력"값을 사용합니다.


10

이 문제에 대한 업데이트 된 솔루션을 제공하기 위해이 답변을 게시하고 있습니다. 현재 Chrome 49를 사용하고 있으며 이에 대한 답변이 없습니다. 또한 다른 브라우저 및 이전 버전과 작동하는 솔루션을 찾고 있습니다.

이 코드를 양식의 시작 부분에 넣으십시오

<div style="display: none;">
    <input type="text" autocomplete="new-password">
    <input type="password" autocomplete="new-password">
</div>

그런 다음 실제 비밀번호 입력란에

<input type="password" name="password" autocomplete="new-password">

더 이상 작동하지 않거나 다른 브라우저 나 버전에 문제가있는 경우이 답변에 주석을 답니다.

승인 :

  • 크롬 : 49
  • Firefox : 44, 45
  • 가장자리 : 25
  • 인터넷 익스플로러 : 11

1
불행히도 Chrome 버전 49.0.2623.87이며 TextBox에서는 작동하지 않지만 여전히 자동 완성 팝업이 표시됩니다.
eYe

8

이것에 대한 해결책을 찾는 사람에게, 나는 마침내 그것을 알아 냈습니다.

페이지가 HTML5 페이지 인 경우 Chrome은 autocomplete = "off"만 준수합니다 (XHTML을 사용 중임).

내 페이지를 HTML5로 변환했는데 문제가 해결되었습니다 (facepalm).


6

입력 유형 속성을로 변경하십시오 type="search".

Google은 검색 유형의 입력에 자동 완성을 적용하지 않습니다.


1
downvote : 크롬 60에서 테스트 : 자동 완성을 방해하지 않습니다.
boly38

6

지난 주까지만해도 아래 두 가지 솔루션이 Chrome, IE 및 Firefox에서 작동하는 것으로 나타났습니다. 그러나 Chrome 버전 48 (및 여전히 49)이 출시되면 더 이상 작동하지 않습니다.

  1. 양식 맨 위에 다음이 있습니다.
<input style="display:none" type="text" name="fakeUsername"/>
<input style="display:none" type="password" name="fakePassword"/>
  1. 비밀번호 입력 요소의 다음 :

    autocomplete = "off"

따라서이 문제를 신속하게 해결하기 위해 처음에는 암호 입력 요소를 비활성화로 설정 한 주요 해킹을 사용하려고 시도한 다음 문서 준비 기능에서 setTimeout을 사용하여 다시 활성화했습니다.

setTimeout(function(){$('#PasswordData').prop('disabled', false);}, 50);

그러나 이것은 너무 미친 것처럼 보였고 검색을 더하고 @tibalts가 Chrome 자동 채우기 사용 중지 에서 답변을 찾았습니다. . 그의 대답은 암호 입력에 autocomplete = "new-password"를 사용하는 것이며 모든 브라우저에서 작동하는 것으로 보입니다 (이 단계에서 위의 수정 번호 1을 유지했습니다).

다음은 Chrome 개발자 토론의 링크입니다. https://code.google.com/p/chromium/issues/detail?id=370363#c7


@JorgeSampayo 암호 입력에서만 작동하지만 텍스트 입력에서는 작동하지 않습니다.
eYe

6

autocomplete=off 최신 브라우저에서는 주로 암호 관리자 등으로 인해 무시됩니다.

이 기능을 추가하면 autocomplete="new-password"모든 브라우저에서 완벽하게 지원되지는 않지만 일부 브라우저에서는 작동합니다.


6

autocomplete="off"일반적으로 작동하지만 항상 그런 것은 아닙니다. name입력 필드 에 따라 다릅니다 . "주소", "이메일", "이름"과 같은 이름은 "code", "pin"과 같은 필드가 자동 완성되지 않을 때 자동 완성됩니다 (브라우저는 사용자를 돕는다 고 생각 autocomplete="off"합니다)

내 문제는-자동 완성이 Google 주소 도우미 와 엉망이었습니다.

이름을 변경하여 수정했습니다.

...에서

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

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

크롬 71에서 테스트되었습니다.


1
이것이 자동 완성을 제거하는 최신 방법이라고 생각합니다.
2081


5

이것이 내 경우에 왜 효과가 있었는지는 알 수 없지만 크롬에서는 사용 autocomplete="none"하고 크롬은 텍스트 필드의 주소 제안을 중단했습니다.


4

Chrome 42부터는이 스레드의 솔루션 / 해킹이 2015-05-21T12:50:23+00:00개별 필드 또는 전체 양식에 대해 자동 완성을 사용 중지하는 데 사용할 수 없습니다.

편집 :display: none 자동 완성을 방지하기 위해 실제로 다른 필드 앞에 하나의 더미 이메일 필드를 양식에 삽입해야합니다 (로 숨길 수 있음 ). 크롬은 자동 완성 된 각 필드에 일종의 양식 서명을 저장하고 다른 이메일 필드를 포함하면이 서명이 손상되고 자동 완성을 방지한다고 가정합니다.

<form action="/login" method="post">
    <input type="email" name="fake_email" style="display:none" aria-hidden="true">
    <input type="email" name="email">
    <input type="password" name="password">
    <input type="submit">
</form>

좋은 소식은 "양식 서명"이 이로 인해 손상 되었기 때문에 어떤 필드도 자동 완성되지 않으므로 제출 전에 가짜 필드를 지우는 데 JS가 필요하지 않다는 것입니다.

기존 답변 :

내가 여전히 실행 가능한 것으로 밝혀진 유일한 것은 실제 필드 앞에 email 및 password 유형의 두 더미 필드를 삽입하는 것입니다. 그것들을 display: none숨기도록 설정할 수 있습니다 (그 필드를 무시할만큼 똑똑하지는 않습니다).

<form action="/login" method="post">
    <input type="email" name="fake_email" style="display:none" aria-hidden="true">
    <input type="password" name="fake_password" style="display:none" aria-hidden="true">
    <input type="email" name="email">
    <input type="password" name="password">
    <input type="submit">
</form>

불행히도 필드는 양식 내에 있어야합니다. 그렇지 않으면 두 입력 세트가 모두 자동으로 채워집니다. 따라서 위조 필드를 실제로 무시하려면 양식 제출을 실행하기 위해 JS가 필요합니다.

form.addEventListener('submit', function() {
    form.elements['fake_email'].value = '';
    form.elements['fake_password'].value = '';
});

위에서 자바 스크립트로 값을 지우면 자동 완성이 무시됩니다. 따라서 JS가 비활성화 된 상태에서 올바른 동작을 잃어버린 경우 Chrome 용 JS 자동 완성 "polyfill"을 사용하여이 모든 것을 단순화 할 수 있습니다.

(function(document) {

    function polyfillAutocomplete(nodes) {

        for(var i = 0, length = nodes.length; i < length; i++) {

            if(nodes[i].getAttribute('autocomplete') === 'off') {

                nodes[i].value = '';
            }
        }
    }

    setTimeout(function() {

        polyfillAutocomplete(document.getElementsByTagName('input'));
        polyfillAutocomplete(document.getElementsByTagName('textarea'));

    }, 1);

})(window.document);

4

입력 필드에 이름이나 전자 메일이 사용되는 것과 비슷한 문제가있었습니다. autocomplete = "off"를 설정했지만 Chrome은 여전히 ​​제안을 강제했습니다. 자리 표시 자 텍스트에 "name"과 "email"이라는 단어가 포함되어 있기 때문입니다.

예를 들어

<input type="text" placeholder="name or email" autocomplete="off" />

자리 표시 자의 단어에 너비가 0 인 공간을 넣어서 문제를 해결했습니다. 더 이상 Chrome 자동 완성 기능이 없습니다.

<input type="text" placeholder="nam&#8203;e or emai&#8203;l" autocomplete="off" />

4

Chrome 48 이상에서는 다음 솔루션을 사용하십시오.

  1. 실제 필드 앞에 가짜 필드를 넣으십시오.

    <form autocomplete="off">
      <input name="fake_email"    class="visually-hidden" type="text">
      <input name="fake_password" class="visually-hidden" type="password">
    
      <input autocomplete="off" name="email"    type="text">
      <input autocomplete="off" name="password" type="password">
    </form>
  2. 가짜 필드 숨기기 :

    .visually-hidden {
      margin: -1px;
      padding: 0;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip: rect(0, 0, 0, 0);
      position: absolute;
    }
  3. 훌륭해!

또한 이것은 이전 버전에서도 작동합니다.


@yivo ur와 og의 유일한 차이점은! tag 태그입니다. 그래서 태그를 추가했지만 여전히 작동하지 않습니다. dropbox.com/s/24yaz6ut7ygkoql/…
Mike Purcell

당신은 필요가 없습니다 @MikePurcell autocomplete="off"form태그입니다. 또한 form태그 바로 뒤에 가짜 입력을 시도하십시오 .
yivo

@Yivo : 제안을 시도하고 전자 메일 필드에서는 잘 작동했지만 자동 입력 드롭 다운은 여전히 ​​암호 필드에서 발생합니다. dropbox.com/s/5pm5hjtx1s7eqt3/…
Mike Purcell

3

설정 크롬 V. (34), 이후 autocomplete="off"<form>태그 어쩌려 구`t 작업

이 성가신 행동을 피하기 위해 변경했습니다.

  1. 비밀번호 입력 name및 제거id
  2. (예 : 입력의 클래스를 넣어 passwordInput)

(지금까지 Chrome은 저장된 비밀번호를 입력에 입력하지 않지만 양식이 손상되었습니다)

마지막으로, 양식이 작동하도록하려면 사용자가 제출 단추를 클릭 할 때 또는 양식 제출을 트리거 할 때마다이 코드를 실행하십시오.

var sI = $(".passwordInput")[0];
$(sI).attr("id", "password");
$(sI).attr("name", "password");

필자의 경우 id="password" name="password"암호 입력을 사용 했으므로 제출을 트리거하기 전에 다시 입력했습니다.


3

모든 솔루션을 시도한 후 다음은 Chrome 버전 : 45에서 작동하는 것 같습니다.

 jQuery('document').ready(function(){
        //For disabling Chrome Autocomplete
        jQuery( ":text" ).attr('autocomplete','pre'+Math.random(0,100000000));
 });

3

난 그냥 업데이트 크롬 49디오 시드의 솔루션은 더 이상 작동하지 않습니다.

페이지가로드 된 후 런타임에 필드를 숨기고 제거하는 다른 해결 방법을 만들었습니다.

Chrome은 이제 첫 번째 표시된 type="password" 필드와 이전 type="text"필드에 자격 증명을 적용하는 원래 해결 방법을 무시 하므로 CSS를 사용하여 두 필드를 숨겼습니다. visibility: hidden;

<!-- HTML -->
<form>
    <!-- Fake fields -->
    <input class="chromeHack-autocomplete">
    <input type="password" class="chromeHack-autocomplete">

    <input type="text" placeholder="e-mail" autocomplete="off" />
    <input type="password" placeholder="Password" autocomplete="off" />
</form>

<!-- CSS -->
.chromeHack-autocomplete {
    height: 0px !important;
    width: 0px !important;
    opacity: 0 !important;
    padding: 0 !important; margin: 0 !important;
}

<!--JavaScript (jQuery) -->
jQuery(window).load(function() {
    $(".chromeHack-autocomplete").delay(100).hide(0, function() {
        $(this).remove();
    });
});

나는 그것이 우아하지 않을 수도 있지만 작동한다는 것을 알고 있습니다.


2

이 솔루션이 가장 적합한 것으로 나타났습니다.

function clearChromeAutocomplete()
{
// not possible, let's try: 
if (navigator.userAgent.toLowerCase().indexOf('chrome') >= 0) 
{
document.getElementById('adminForm').setAttribute('autocomplete', 'off'); 
setTimeout(function () {
        document.getElementById('adminForm').setAttribute('autocomplete', 'on'); 
}, 1500);
}
}

dom 준비 후 또는 폼이 렌더링 된 후에로드해야합니다.


2

자동 완성이 사용자 선택이어야한다는 데 동의하지만 Chrome이 열광적 인 경우가 있습니다 (다른 브라우저도 가능). 예를 들어, 다른 이름의 비밀번호 필드는 여전히 저장된 비밀번호로 자동으로 채워지고 이전 필드는 사용자 이름으로 채워집니다. 특히 양식이 웹 앱의 사용자 관리 양식이고 자동 완성으로 자신의 자격 증명을 채우고 싶지 않을 때 특히 문제가됩니다.

Chrome은 이제 autocomplete = "off"를 완전히 무시합니다. JS 해킹이 잘 작동 할 수 있지만 글을 쓰는 시점에 작동하는 간단한 방법을 찾았습니다.

비밀번호 필드의 값을 제어 문자 8 ( "\x08"PHP 또는&#8; HTML)로 설정하십시오. 이렇게하면 값이 있기 때문에 Chrome에서 필드 자동 채우기가 중지되지만 백 스페이스 문자이므로 실제 값이 입력되지 않습니다.

예, 이것은 여전히 ​​해킹이지만 저에게 효과적입니다. YMMV.


Chrome 40에서 작동하지 않는 것 같습니다.
후드

나는 그들이이 핵을 집어 들고 값에서 제어 문자를 무시했다고 생각하므로 이제는 비어있는 것으로 평가됩니다. 올바른 최신 솔루션 은 @ ice-cream stackoverflow.com/a/16130452/752696 의 답변을 참조하십시오 .
spikyjt

동일한 사용 사례 : 사용자 관리 작업 및 자체 자격 증명 자동 작성. 그러나 그것은 내 자신의 코드이므로 JS를 통해 값을 form재정의하는 기존 사용자를 새로 작성하고 기존 사용자를 편집하는 데 재사용 input하여 자동 완성 기능을 제거했습니다.
nuala
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.