난 그냥 당신이 사이트에 대한 기억 사용자 이름과 암호가있는 경우, 크롬의 현재 버전에 사용자 이름 / 이메일 주소를 자동 완성 할 것으로 나타났습니다 전에 필드 모든 type=password필드. 필드가 무엇인지 상관하지 않습니다. 비밀번호가 사용자 이름이되기 전에 필드를 가정합니다.

오래된 솔루션

그냥 사용 <form autocomplete="off">하면 암호 사전 채우기뿐만 아니라 브라우저가 만들 수있는 가정 (종종 잘못된 경우)을 기반으로하는 모든 종류의 휴리스틱 채우기가 방지됩니다. <input autocomplete="off">암호 자동 완성 기능은 Chrome 을 사용 하는 것과는 반대로 (Firefox는 암호를 준수합니다).

업데이트 된 솔루션

Chrome은 이제 무시합니다 <form autocomplete="off">. 따라서 원래 삭제 된 해결책은 이제 모든 분노입니다.

간단히 두 개의 필드를 만들고 “display : none”으로 숨기십시오. 예:

<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>

그런 다음 실제 필드를 아래에 두십시오.

의견을 추가하거나 팀의 다른 사람들이 귀하의 활동을 궁금해 할 것입니다!

2016 년 3 월 업데이트

최신 Chrome으로 테스트했습니다. 모두 좋습니다. 이것은 꽤 오래된 답변이지만 지금은 우리 팀이 수십 개의 프로젝트에서 수년 동안 그것을 사용하고 있다고 언급하고 싶습니다. 아래의 몇 가지 의견에도 불구하고 여전히 훌륭하게 작동합니다. 필드는 display:none포커스를 얻지 못한다 는 의미 이므로 액세스 가능성에는 문제가 없습니다 . 앞에서 언급했듯이 실제 필드 앞에 배치해야 합니다.

자바 스크립트를 사용하여 양식을 수정하는 경우 추가 트릭이 필요합니다. 양식을 조작하는 동안 가짜 필드를 표시 한 다음 1 밀리 초 후에 다시 숨 깁니다.

jQuery를 사용하는 예제 코드 (가짜 필드에 클래스를 제공한다고 가정) :

        $(".fake-autofill-fields").show();
        // some DOM manipulation/ajax here
        window.setTimeout(function () {
            $(".fake-autofill-fields").hide();
        },1);

2018 년 7 월 업데이트

Chrome의 사용 중지 방지 전문가가 열심히 일한 이후 솔루션이 더 이상 제대로 작동하지 않습니다. 그러나 그들은 다음과 같은 형태로 우리에게 뼈를 던졌습니다.

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

이것은 작동하며 대부분 문제를 해결합니다.

그러나 비밀번호 필드가없고 이메일 주소 만있는 경우 작동하지 않습니다. 또한 노란색으로 떨어지거나 사전 채우기를 중단하기가 어려울 수 있습니다. 가짜 필드 솔루션을 사용하여이 문제를 해결할 수 있습니다.

실제로 때로는 가짜 필드 두 개를 떨어 뜨려 다른 장소에서 시도해야합니다. 예를 들어 양식 시작 부분에 이미 가짜 필드가 있었지만 Chrome은 최근에 ‘이메일’필드를 다시 미리 채우기 시작했습니다. 따라서 ‘이메일’필드 바로 앞에 두 배가되어 더 많은 가짜 필드를 넣었습니다. . 첫 번째 또는 두 번째 로트 필드를 제거하면 잘못된 과도 자동 완성으로 돌아갑니다.

2020 년 3 월 업데이트

이 솔루션이 여전히 언제 작동하는지는 확실하지 않습니다. 때로는 여전히 작동하지만 항상 그렇지는 않습니다.

아래 주석에는 몇 가지 힌트가 있습니다. @anilyeni가 방금 추가 한 것 중 하나는 더 조사 할 가치가 있습니다.

내가 알다시피에 autocomplete="off"요소가 3 개 미만인 경우 Chrome 80 에서 작동합니다 <form>. 논리가 무엇인지 또는 관련 문서가 어디에 있는지 모르겠습니다.

또한 @dubrox의 이것도 테스트하지는 않았지만 관련이있을 수 있습니다.

트릭에 대해 많은 감사하지만 display:none;더 이상 작동하지 않지만 대답은 업데이트하십시오. position: fixed;top:-100px;left:-100px; width:5px;🙂

2020 년 4 월 업데이트

이 속성에 대한 크롬의 특별한 가치는 일을하고 있습니다 : (입력에서 테스트되었지만 나에 의해 테스트되지는 않았습니다)
autocomplete="chrome-off"

답변

<form autocomplete="off">
  <input type="text" id="lastName" autocomplete="none"/>
  <input type="text" id="firstName" autocomplete="none"/>
</form>

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

<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();  }" />

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

<input type="text" name="prevent_autofill" id="prevent_autofill" value="" style="display:none;" />
<input type="password" name="password_fake" id="password_fake" value="" style="display:none;" />
<input type="password" name="password" id="password" value="" />

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