CSS를 통한 자동 완성 비활성화

CSS를 통한 자동 완성 비활성화

---

CSS를 사용하여 양식 요소 (특히 텍스트 필드)에서 자동 완성을 비활성화 할 수 있습니까?

자동 완성 요소를 허용하지 않는 태그 라이브러리를 사용하고 있으며 Javascript를 사용하지 않고 자동 완성을 비활성화하고 싶습니다.

---

생성 된 id및 name매번 다른 것을 사용할 수 있으므로 브라우저는이 텍스트 필드를 기억할 수 없으며 일부 값을 제안하지 못합니다.

이것은 적어도 크로스 브라우저 안전한 대안이지만 RobertsonM ( autocomplete="off") 의 답변을 사용하는 것이 좋습니다 .

---

현재 CSS에는 'autocomplete off'속성이 없습니다. 그러나 html에는이를위한 쉬운 코드가 있습니다.

<input type="text" id="foo" value="bar" autocomplete="off" />

사이트 전체 이펙터를 찾고 있다면 모든 'input'을 실행하고이 태그를 추가하는 js 함수를 갖거나 해당 CSS 클래스 / ID를 찾는 것이 쉬운 방법입니다.

autocomplete 속성은 Chrome 및 Firefox (!)에서 잘 작동하지만 HTML 양식에서 자동 완성을 비활성화하는 W3C 유효한 방법이 있습니까?를 참조하십시오.

---

jQuery로 쉽게 구현할 수 있습니다.

$('input').attr('autocomplete','off');

---

를 사용하는 경우 form모든 자동 완성을 비활성화 할 수 있습니다.

<form id="Form1" runat="server" autocomplete="off">

---

CSS에는이 기능이 없습니다. 클라이언트 측 스크립팅을 사용해야합니다.

---

이 질문 답변 및 웹의 다른 기사에서 제안 된 모든 방법을 시도했지만 어쨌든 작동하지 않았습니다. 다음과 같이 클라이언트 측 스크립트를 사용하지만 $ (document) .ready () 외부에서 언급 한 사용자 중 하나를 사용하여 양식 요소에서 autocomplete = "new-random-value", autocomplete = "off"를 시도했습니다.

$(':input').on('focus', function () {
  $(this).attr('autocomplete', 'off')
});

브라우저에서 다른 우선 순위가이 이상한 동작을 일으키는 원인이 될 수 있습니다! 그래서 더 많이 검색했고 마지막 으로이 좋은 기사의 줄 아래를주의 깊게 다시 읽었습니다 .

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

사이트에서에 대해 autocomplete = "off"를 설정하고 양식에 사용자 이름 및 비밀번호 입력 필드가 포함 된 경우 브라우저는 여전히이 로그인을 기억하도록 제안하고 사용자가 동의하면 브라우저는 다음에 사용자가 해당 필드를 자동으로 채 웁니다. 페이지를 방문합니다. 사이트에서 사용자 이름 및 비밀번호 필드에 autocomplete = "off"를 설정하면 브라우저는이 로그인을 기억하도록 제안하고 사용자가 동의하면 브라우저는 다음에 사용자가 페이지를 방문 할 때 해당 필드를 자동으로 채 웁니다. 이것은 Firefox (버전 38 이후), Google Chrome (34 이후) 및 Internet Explorer (버전 11 이후)의 동작입니다.

사용자가 다른 사람에 대해 새 암호를 지정할 수있는 사용자 관리 페이지를 정의하고 있으므로 암호 필드의 자동 채우기를 방지하려면 autocomplete = "new-password"를 사용할 수 있습니다 . 그러나이 값에 대한 지원은 Firefox에서 구현되지 않았습니다.

그냥 작동했습니다. 나는 특별히 크롬을 시도했고 이것이 계속 작동하고 다른 사람들을 돕길 바랍니다.

---

모든 입력에 가짜 자동 완성 이름을 추가하여 문제를 해결했습니다.

$("input").attr("autocomplete", "fake-name-disable-autofill");

---

@ahhmarr의 솔루션 덕분에 Angular + ui-router 환경 에서 동일한 문제를 해결할 수있었습니다 . 여기에서 관심있는 사람을 위해 공유하겠습니다.

내 index.html에서 다음 스크립트를 추가했습니다.

<script type="text/javascript">
    setTimeout(function() {
        $('input').attr('autocomplete', 'off');
    }, 2000);
</script>

그런 다음 상태 변경을 다루기 위해 루트 컨트롤러에 다음을 추가했습니다.

$rootScope.$on('$stateChangeStart', function() {
                $timeout(function () {
                    $('input').attr('autocomplete', 'off');
                }, 2000);
            });

시간 초과는 jquery를 적용하기 전에 html이 렌더링하는 것입니다.

더 나은 솔루션을 찾으면 알려주십시오.

---

CSS를 사용하여 자동 완성을 비활성화 할 수 없지만 HTML을 사용할 수 있습니다.

<input type="text" autocomplete="false" />

기술적으로 false잘못된 값으로 바꿀 수 있으며 작동합니다. 이 iOS는 Edge에서도 작동하는 유일한 솔루션입니다.

---

$('input').attr('autocomplete','off');

참고 URL : https://stackoverflow.com/questions/2186290/disable-autocomplete-via-css