[html] CSS를 통한 자동 완성 비활성화

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

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



답변

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

이것은 적어도 크로스 브라우저 안전한 대안이지만 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");