여러 양식에서 크롬 자동 완성 동작에 문제가 있습니다.

양식의 필드는 모두 "이메일", "이름"또는 "암호"와 같이 매우 일반적이고 정확한 이름을 가지며 autocomplete="off" 설정되었습니다.

자동 완성 플래그는 자동 완성 동작을 성공적으로 비활성화했습니다. 여기서 입력을 시작할 때 값 드롭 다운이 표시되지만 Chrome에서 필드를 자동으로 채우는 값은 변경되지 않았습니다.

크롬이 입력을 잘못 채우는 것 (예 : 전화 입력을 이메일 주소로 채우는 것)을 제외하고는이 동작이 정상입니다. 고객이 이에 대해 불평했기 때문에 여러 경우에서 발생하는 것으로 확인되었으며 내 컴퓨터에서 로컬로 수행 한 작업의 결과가 아닙니다.

내가 생각할 수있는 유일한 해결책은 사용자 정의 입력 이름을 동적으로 생성 한 다음 백엔드에서 값을 추출하는 것입니다. 그러나 이것은이 문제를 해결하는 꽤 해킹 된 것처럼 보입니다. 이 문제를 해결하는 데 사용할 수있는 자동 완성 동작을 변경하는 태그 나 특징이 있습니까?

새 Chrome 버전 autocomplete="new-password"의 경우 비밀번호 입력란에 입력하면됩니다. 나는 그것을 확인하고 잘 작동합니다.

이 토론에서 Chrome 개발자의 팁을 얻었습니다 : https://bugs.chromium.org/p/chromium/issues/detail?id=370363#c7

PS Chrome은 이름, ID 및 레이블 및 임의의 텍스트 노드를 포함하여 필드 주변에서 얻을 수있는 모든 텍스트 콘텐츠에서 자동 완성 동작을 유추하려고 시도합니다. street-address문맥 과 같이 자동 완성 토큰이 있으면 Chrome에서 자동 완성합니다. 휴리스틱은 양식에 추가 필드가있는 경우에만 트리거되거나 양식에 필드가 너무 적은 경우에만 트리거되므로 상당히 혼란 스러울 수 있습니다. 또한 autocomplete="no"작동하는 것처럼 보이지만 autocomplete="off"역사적 이유로는 그렇지 않습니다. autocomplete="no"브라우저에이 필드는이라는 필드로 자동 완성되어야한다고 알려주는 것 "no"입니다. 고유 한 임의 autocomplete이름 을 생성 하면 자동 완성 기능이 비활성화됩니다.

사용자가 잘못된 양식을 방문한 경우 자동 완성 정보가 손상 되었을 수 있습니다 . Chrome에 수동으로 들어가서 자동 완성 정보를 수정하도록하는 것이 필요한 조치 일 수 있습니다.

난 그냥 당신이 사이트에 대한 기억 사용자 이름과 암호가있는 경우, 크롬의 현재 버전에 사용자 이름 / 이메일 주소를 자동 완성 할 것으로 나타났습니다 전에 필드 모든 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"

몇 달과 몇 달의 노력 끝에 솔루션이 생각보다 훨씬 단순하다는 것을 알았습니다.

대신 autocomplete="off"사용 autocomplete="false")

그렇게 간단하며 Chrome에서도 매력처럼 작동합니다!

2019 년 8 월 업데이트 (댓글에서 @JonEdiger 로의 신용)

참고 : 많은 온라인 정보에 따르면 브라우저는 이제 autocomplete = 'false'를 autocomplete = 'off'와 동일하게 취급합니다. 적어도 지금이 순간, 그것은 세 브라우저에서 자동 완성을 막고 있습니다.

양식 수준에서 설정 한 다음 원하는 입력에 대해 '없음'과 같은 유효하지 않은 값으로 설정하십시오.

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

때로는 autocomplete=off자격 증명을 잘못된 필드에 채우는 것을 막지 못할 수도 있습니다.

해결 방법은 읽기 전용 모드를 사용하여 브라우저 자동 완성을 비활성화하고 쓰기 가능 초점을 설정하는 것입니다.

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

focus이벤트는 마우스 클릭에서 발생하고 필드를 통해 탭 이동.

최신 정보:

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 의 암호 필드 앞에 나타납니다 (관찰로 인해 추측). 브라우저가 마지막 인스턴스이므로 제어 할 수 없으므로

위의 읽기 전용 수정은 저에게 효과적이었습니다.

검색 창 기능을 구현하는 경우 type속성을 search다음과 같이 설정하십시오 .

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

이것은 Chrome v48에서 작동하며 합법적 인 마크 업 인 것으로 보입니다.

https://www.w3.org/wiki/HTML/Elements/input/search

이 시도. 나는 질문이 다소 오래되었다는 것을 알고 있지만 이것은 문제에 대한 다른 접근법입니다.

또한 문제가 password현장 바로 위에 있다는 것을 알았습니다 .

나는 두 가지 방법을 모두 시도했다.

<form autocomplete="off">그리고 <input autocomplete="off">하지만 그들 중 누구도 나를 위해 일하지 않는다.

그래서 아래 스 니펫을 사용하여 수정했습니다. 비밀번호 유형 필드 바로 위에 다른 텍스트 필드를 추가하여 만들었습니다 display:none.

이 같은:

<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">

이유를 모르겠지만 autocompelete = "new-password"는 자동 완성을 비활성화합니다. 최신 49.0.2623.112 크롬 버전 에서 작동했습니다 .

나를 위해, 단순

<form autocomplete="off" role="presentation">

그것을했다.

여러 버전에서 테스트되었으며 마지막 시도는 56.0.2924.87입니다.

이 속성을 추가해야합니다.

autocomplete="new-password"

소스 링크 : 전체 기사

너무 간단하고 까다 롭습니다 :)

구글 크롬은 기본적으로 검색 마다 표시되는 첫 번째 암호 요소 내부 <form>, <body>그리고 <iframe>태그 그래서 당신은 다음과 같은 더미 암호 요소를 추가하기 위해 필요한이 비활성화, 그들을 위해 자동 리필을 사용하려면 :

1. • <form>태그 내부의 비밀번호 요소가 <form>열린 태그 직후 양식의 첫 번째 요소로 더미 요소를 넣어야합니다.

   • 암호 요소가 <form>태그 안에 있지 않은 경우 <body>열린 태그 바로 뒤에 더미 요소를 HTML 페이지의 첫 번째 요소로 넣으십시오.

2. CSS를 사용하지 않고 더미 요소를 숨겨야 display:none하므로 기본적으로 더미 암호 요소로 다음을 사용하십시오.

   <input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/>

사람들이 만드는 것처럼 보이는 모든 해결 방법을 Google이 우선적으로 주장하고 있기 때문에 내가 제안한 솔루션은 다음과 같습니다.

옵션 1-클릭시 모든 텍스트 선택

입력 값을 사용자 (예 :) your@email.com또는 필드 레이블 (예 :)의 예로 설정 Email하고 focus-select입력에 호출 된 클래스를 추가 하십시오.

<input type="text" name="email" class="focus-select" value="your@email.com">
<input type="password" name="password" class="focus-select" value="password">

그리고 여기 jQuery가 있습니다 :

$(document).on('click', '.focus-select', function(){
  $(this).select();
});

나는 크롬이 가치를 어지럽히는 것을 볼 수 없습니다. 미친 짓이야 희망적으로 이것은 안전한 솔루션입니다.

옵션 2-이메일 값을 공백으로 설정 한 후 삭제

이메일 및 비밀번호와 같은 두 개의 입력이 있다고 가정하면 이메일 필드의 값을 " "(공백)으로 설정하고 attribute / value를 추가 autocomplete="off"한 후 JavaScript로이를 지우십시오. 비밀번호 값을 비워 둘 수 있습니다.

어떤 이유로 사용자에게 JavaScript가없는 경우 공간을 삭제하지 않을 경우 입력 서버 측을 자르십시오 (아마도 있어야합니다).

jQuery는 다음과 같습니다.

$(document).ready(function() {
  setTimeout(function(){
    $('[autocomplete=off]').val('');
  }, 15);
});

테스트에서 때때로 작동하는 것처럼 보이기 15때문에 타임 아웃을 설정 5했으므로이 숫자를 떨리는 것은 안전한 내기처럼 보입니다.

초기 값을 공백으로 설정하지 않으면 입력이 자동으로 채워진 것처럼 Chrome이 입력을 노란색으로 남겨 둡니다.

옵션 3-숨겨진 입력

이것을 양식의 시작 부분에 넣으십시오.

<!-- Avoid Chrome autofill -->
<input name="email" class="hide">

CSS :

.hide{ display:none; }

다른 개발자가 HTML 노트를 삭제하지 않도록 HTML 노트를 보관하십시오! 또한 숨겨진 입력의 이름이 관련성이 있는지 확인하십시오.

CSS 텍스트 보안 사용 : type = password 를 사용하지 않는 디스크 .

html

<input type='text' name='user' autocomplete='off' />
<input type='text' name='pass' autocomplete='off' class='secure' />

or

<form autocomplete='off'>
    <input type='text' name='user' />
    <input type='text' name='pass' class='secure' />
</form>

CSS

input.secure {
    text-security: disc;
    -webkit-text-security: disc;
}

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

autocomplete="nope"

양식에 추가하면 Chrome에서 자동 완성을 사용하지 못하게됩니다.

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

여기에서 찾았습니다. https://code.google.com/p/chromium/issues/detail?id=468153#hc41

Chrome이 자동 완성시기에 대해 개발자보다 더 잘 알고 있다고 결정한 것에 대해 정말 실망했습니다. 진정한 Microsoft 느낌이 듭니다.

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

onfocus 이벤트와 함께 태그에 readonly 속성을 추가하면 태그가 제거되어 문제가 해결됩니다.

사용자 이름 비밀번호 콤보의 경우 이는 해결하기 쉬운 문제입니다. Chrome 휴리스틱은 패턴을 찾습니다.

<input type="text">

뒤에 :

<input type="password">

다음을 무효화하여이 프로세스를 중단하십시오.

<input type="text">
<input type="text" onfocus="this.type='password'">

Mike Nelsons는 Chrome 50.0.2661.102 m에서 솔루션을 제공하지 못했습니다. display : none set과 동일한 유형의 입력 요소를 추가하면 더 이상 기본 브라우저 자동 완성 기능이 비활성화되지 않습니다. 이제 자동 완성 기능을 비활성화하려는 입력 필드의 이름 속성을 복제해야합니다.

또한 입력 요소가 양식 요소 내에있을 때 입력 필드가 중복되지 않도록하려면 표시되지 않은 요소에 대해 비활성화해야합니다. 이렇게하면 해당 요소가 양식 작업의 일부로 제출되지 않습니다.

<input name="dpart" disabled="disabled" type="password" style="display:none;">
<input name="dpart" type="password">
<input type="submit">

2016 년 Chrome autocomplete=off은 W3C에 있지만 무시하기 시작했습니다 . 그들이 게시 한 답변 :

여기서 까다로운 부분은 웹 완성 과정의 어딘가에서 자동 완성 = 꺼짐이 많은 양식 필드의 기본값이되어 사용자에게 좋은지 여부에 대한 실제 생각이 없다는 것입니다. 이는 브라우저 자동 완성 데이터를 원하지 않는 (예 : CRM 시스템) 매우 타당한 사례가 아니라는 것을 의미하지만 소수의 사례로 간주합니다. 결과적으로 Chrome 자동 완성 데이터에 대해 autocomplete = off를 무시하기 시작했습니다.

본질적으로 우리는 사용자가 원하는 것을 더 잘 알고 있습니다.

autocomplete = off가 필요할 때 유효한 사용 사례를 게시하기 위해 다른 버그를 열었습니다.

모든 B2B 응용 프로그램을 통해 자동 완성과 관련된 문제를 보지 못했지만 암호 유형 만 입력했습니다.

화면에 비밀번호 필드가 있으면 숨겨진 비밀번호도 자동 완성됩니다. 이 논리를 깨기 위해 자신의 페이지 논리를 손상시키지 않으면 각 비밀번호 필드를 고유 한 형식으로 넣을 수 있습니다.

<input type=name >

<form>
    <input type=password >
</form>

자리 표시자를 유지하는 데 문제가 있지만 크롬 자동 완성을 사용 중지하는 경우이 해결 방법을 찾았습니다.

문제

HTML

<div class="form">
    <input type="text" placeholder="name"><br>
    <input type="text" placeholder="email"><br>
    <input type="text" placeholder="street"><br>
</div>

http://jsfiddle.net/xmbvwfs6/1/

위의 예에서는 여전히 자동 완성 문제가 발생하지만 required="required"일부 CSS를 사용 하면 자리 표시자를 복제 할 수 있으며 Chrome은 태그를 선택하지 않습니다.

해결책

HTML

<div class="form">
    <input type="text" required="required">
    <label>Name</label>  
    <br>
    <input type="text" required="required">
    <label>Email</label>    
    <br>
    <input type="text" required="required">
    <label>Street</label>    
    <br>
</div>

CSS

input {
    margin-bottom: 10px;
    width: 200px;
    height: 20px;
    padding: 0 10px;
    font-size: 14px;
}
input + label {
    position: relative;
    left: -216px;
    color: #999;
    font-size: 14px;
}
input:invalid + label { 
    display: inline-block; 
}
input:valid + label { 
    display: none; 
}

http://jsfiddle.net/mwshpx1o/1/

나는 숨겨진 들판을 만드는 것을 정말로 좋아하지 않았다. 나는 그것을 그렇게 만드는 것이 정말로 빨리 혼동 될 것이라고 생각한다.

자동 완성을 중지하려는 입력 필드에서 작동합니다. 필드를 읽기 전용으로하고 초점을 맞추면 다음과 같은 속성이 제거됩니다.

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

이것이하는 일은 먼저 필드를 선택하여 읽기 전용 속성 을 제거해야 하며 그 당시에는 자신의 사용자 입력으로 채워지고 자동 채우기 를 대체하여 대체 할 것입니다

크롬에 캐시 된 이전에 입력 한 값은 드롭 다운 선택 목록으로 표시됩니다. autocomplete = off로 비활성화 할 수 있습니다. 크롬의 고급 설정에서 명시 적으로 저장된 주소는 주소 필드에 포커스가있을 때 자동 완성 팝업을 제공합니다. 이는 autocomplete = "false"로 비활성화 할 수 있습니다. 그러나 크롬은 캐시 된 값을 드롭 다운에 표시 할 수 있습니다.

입력 html 필드에서 다음이 둘 다 꺼집니다.

Role="presentation" & autocomplete="off"

주소 자동 완성을 위해 입력 필드를 선택하는 동안 Chrome은 선행 라벨 html 요소가없는 입력 필드를 무시합니다.

크롬 파서가 자동 완성 주소 팝업의 입력 필드를 무시하도록하기 위해 레이블과 텍스트 상자 사이에 숨겨진 버튼 또는 이미지 컨트롤을 추가 할 수 있습니다. 그러면 자동 완성을위한 크롬 입력 구문 순서의 라벨-입력 쌍 생성이 중단됩니다. 주소 필드를 구문 분석하는 동안 확인란이 무시됩니다.

Chrome은 또한 레이블 요소의 "for"속성을 고려합니다. 크롬의 구문 분석 시퀀스를 중단하는 데 사용할 수 있습니다.

우리 모두 에게이 문제가 있기 때문에이 문제에 대한 jQuery 확장 기능을 작성하는 데 시간을 투자했습니다. Google은 Google을 따르지 않고 html 마크 업을 따라야합니다.

(function ($) {

"use strict";

$.fn.autoCompleteFix = function(opt) {
    var ro = 'readonly', settings = $.extend({
        attribute : 'autocomplete',
        trigger : {
            disable : ["off"],
            enable : ["on"]
        },
        focus : function() {
            $(this).removeAttr(ro);
        },
        force : false
    }, opt);

    $(this).each(function(i, el) {
        el = $(el);

        if(el.is('form')) {
            var force = (-1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable))
            el.find('input').autoCompleteFix({force:force});
        } else {
            var disabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable);
            var enabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.enable);
            if (settings.force && !enabled || disabled)
                el.attr(ro, ro).focus(settings.focus).val("");
        }
    });
};
})(jQuery);

이것을 /js/jquery.extends.js 와 같은 파일에 추가 하고 jQuery를 지나서 포함 시킵니다 . 다음과 같이 문서를로드 할 때 각 양식 요소에 적용하십시오.

$(function() {
    $('form').autoCompleteFix();
});

테스트와 jsfiddle

jQuery나를 위해 일한 다음 코드를 시도하십시오 .

if ($.browser.webkit) {
    $('input[name="password"]').attr('autocomplete', 'off');
    $('input[name="email"]').attr('autocomplete', 'off');
}

여기에는 두 가지가 있습니다. Chrome 및 기타 브라우저는 이전에 입력 한 필드 이름 값을 기억하고이를 기반으로 사용자에게 자동 완성 목록을 제공합니다 (특히 명백한 이유로 비밀번호 유형 입력은 이러한 방식으로 기억 되지 않습니다 ). 당신은 autocomplete="off"당신의 이메일 필드와 같은 것들에 이것을 방지하기 위해 추가 할 수 있습니다 .

그러나 암호 필러가 있습니다. 대부분의 브라우저에는 자체 내장 구현이 있으며이 기능을 제공하는 많은 타사 유틸리티도 있습니다. 이것은, 당신은 할 수 없습니다 중지합니다. 이 정보는 나중에 자동으로 채워지도록 저장하기 위해 사용자가 스스로 선택하며 응용 프로그램의 영향 범위와 영역을 완전히 벗어납니다.

당 # 352347 크롬 버그 리포트 크롬 더 이상면 autocomplete="off|false|anythingelse", 어느 형태에도 입력합니다.

나를 위해 일한 유일한 해결책 은 더미 암호 필드 를 추가하는 것입니다 .

<input type="password" class="hidden" />
<input type="password" />

여기서 작동하도록 설정 autocomplete하면 off검색 페이지에서 Google이 사용하는 예제가 있습니다. inspect 요소에서 이것을 찾았습니다.

편집 : off작동하지 않는 경우 false또는 을 시도하십시오 nofill. 제 경우에는 크롬 버전 48.0에서 작동합니다.

더러운 해킹이 있습니다-

여기에 요소가 있습니다 (disabled 속성 추가).

<input type="text" name="test" id="test" disabled="disabled" />

그런 다음 웹 페이지 하단에 JavaScript를 넣으십시오.

<script>
    setTimeout(function(){
        document.getElementById('test').removeAttribute("disabled");
        },100);
</script>

다른 솔루션, 웹킷 기반. 이미 언급했듯이 Chrome은 비밀번호 입력란을 찾을 때마다 이메일을 자동 완성합니다. AFAIK, 이것은 자동 완성 = [무엇이든]에 관계없이 적용됩니다.

이를 피하기 위해 입력 유형을 텍스트로 변경하고 원하는 형식으로 웹킷 보안 글꼴을 적용하십시오.

.secure-font{
-webkit-text-security:disc;}

<input type ="text" class="secure-font">

내가 볼 수 있듯이 적어도 input type = password만큼 안전합니다. 복사하여 붙여 넣습니다. 그러나 별표를 제거하는 스타일을 제거하면 취약합니다. 물론 입력 유형 = 비밀번호를 콘솔에서 입력 유형 = 텍스트로 쉽게 변경하여 자동 완성 된 비밀번호를 표시 할 수 있으므로 실제로 거의 동일합니다.

나를 위해 작동하는 유일한 방법은 다음과 같습니다. (jQuery 필요)

$(document).ready(function(e) {
    if ($.browser.webkit) {
        $('#input_id').val(' ').val('');
    }
});

나는 같은 문제에 직면했다. 다음은 Chrome에서 자동 완성 사용자 이름 및 비밀번호를 사용 중지하는 솔루션입니다 (Chrome에서만 테스트 됨).

    <!-- Just add this hidden field before password as a charmed solution to prevent auto-fill of browser on remembered password -->
    <input type="tel" hidden />
    <input type="password" ng-minlength="8" ng-maxlength="30" ng-model="user.password" name="password" class="form-control" required placeholder="Input password">