development

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

big-blog 2020. 2. 25. 22:42
반응형

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


이 질문에는 이미 답변이 있습니다.

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

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


최신 정보

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>과 사건이 해결되었습니다.


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

<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="off"에 있지 않으면 Chrome이 이제 무시합니다 <form autocomplete="off">.


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

<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 을 참조하십시오.

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


현대적 접근

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

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

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

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

작업 예


글쎄, 파티에 조금 늦었지만 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.


현재 해결책은을 사용하는 것 type="search"입니다. Google은 검색 유형의 입력에 자동 완성을 적용하지 않습니다.

참조 : https://twitter.com/Paul_Kinlan/status/596613148985171968

2016 년 4 월 4 일 업데이트 : 이 수정 된 것 같습니다! http://codereview.chromium.org/1473733008 참조


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

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


브라우저는 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조차도 자격 증명 을 잘못된 필드 에 채우지 못하지만 사용자 또는 닉네임 필드는 아닙니다.


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

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

다음에서 작동합니다.

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

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 는 표준이며 아마도 보편적으로 지원 될 것입니다.


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

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

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


크롬이을 무시하는 것을 보았습니다 autocomplete="off". 나는 "가짜 입력"을 사용하여 크롬을 속여 "진짜"를 채우는 대신 속임수를 쓰는 바보 같은 방법으로 그것을 해결했습니다.

예:

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

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


이 문제에 대한 업데이트 된 솔루션을 제공하기 위해이 답변을 게시하고 있습니다. 현재 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

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

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

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


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

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

도움이 되길 바랍니다.


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

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


지난 주까지만해도 아래 두 가지 솔루션이 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);

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

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


대신 자동 완성 = "off"를 사용하여 자동 완성 = "false"를 ;)

에서 : https://stackoverflow.com/a/29582380/75799


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

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


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);

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. 훌륭해!

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


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

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

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

...에서

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

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

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


설정 크롬 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"암호 입력을 사용 했으므로 제출을 트리거하기 전에 다시 입력했습니다.


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

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

난 그냥 업데이트 크롬 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();
    });
});

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


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

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 준비 후 또는 폼이 렌더링 된 후에로드해야합니다.


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

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

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

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


다른 방법으로 해결했습니다. 당신은 이것을 시도 할 수 있습니다.

<input id="passfld" type="text" autocomplete="off" />
<script type="text/javascript">
// Using jQuery
$(function(){                                               
    setTimeout(function(){
        $("input#passfld").attr("type","password");
    },10);
});


// or in pure javascript
 window.onload=function(){                                              
    setTimeout(function(){  
        document.getElementById('passfld').type = 'password';
    },10);
  }   
</script>

입력 필드에 이름이나 전자 메일이 사용되는 것과 비슷한 문제가있었습니다. 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" />

참고 URL : https://stackoverflow.com/questions/12374442/chrome-ignores-autocomplete-off



반응형