CSS를 사용하여 양식 요소 (특히 텍스트 필드)에서 자동 완성을 비활성화 할 수 있습니까?
자동 완성 요소를 허용하지 않는 태그 라이브러리를 사용하고 있으며 Javascript를 사용하지 않고 자동 완성 기능을 비활성화하고 싶습니다.
답변:
생성 된 id및 name매번 다른 것을 사용할 수 있으므로 브라우저는이 텍스트 필드를 기억할 수 없으며 일부 값을 제안하지 못합니다.
이것은 적어도 크로스 브라우저 안전한 대안이지만 RobertsonM ( autocomplete="off") 의 답변을 사용하는 것이 좋습니다 .
autocomplete="off"것은 브라우저 X 버전 (현재 + 1)에서 무시됩니다. (예를 들어, 최신 Google 크롬은 자동 완성 = 오프 무시합니다.)
id여전히 캐시에 저장됩니다 (예 : 사용자의 하드 드라이브). 이것은 누군가의 신용 카드 번호 나 기타 민감한 정보에 대해 끔찍한 일입니다. 또한 사용자의 디스크 드라이브를 불필요하게 복잡하게 만듭니다. 그들이 귀하의 페이지를 방문 할 때마다 새로운 (쿠키와 유사한) 파일이 컴퓨터에 저장됩니다. 도대체 Chrome 캐시를 지우고 여유 공간을 확인하십시오 (한동안하지 않은 경우). 그것이 제가 그것을 끔찍한 생각이라고 부르는 이유입니다.
현재 CSS에는 'autocomplete off'속성이 없습니다. 그러나 html에는이를위한 쉬운 코드가 있습니다.
<input type="text" id="foo" value="bar" autocomplete="off" />
사이트 전체 이펙터를 찾고 있다면 모든 'input'을 실행하고이 태그를 추가하는 js 함수를 갖거나 해당 CSS 클래스 / ID를 찾는 것이 쉬운 방법입니다.
autocomplete 속성은 Chrome 및 Firefox (!)에서 잘 작동하지만 HTML 양식에서 자동 완성을 비활성화하는 W3C 유효한 방법이 있습니까?를 참조하십시오.
autocomplete="anyrandominvalidvalue" 작동 할 것을 제안 합니다.
jQuery로 쉽게 구현할 수 있습니다.
$('input').attr('autocomplete','off');
form이 유일 하게 작동했습니다. 아닙니다 input. 감사.
를 사용하는 경우 form모든 자동 완성을 비활성화 할 수 있습니다.
<form id="Form1" runat="server" autocomplete="off">
CSS에는이 기능이 없습니다. 클라이언트 측 스크립팅을 사용해야합니다.
autocomplete="false"은 Edge에서 작동합니다. 기술적으로 잘못된 값은 여기에서 "false"대신 사용할 수 있습니다.
이 질문 답변 및 웹의 다른 기사에서 제안 된 모든 방법을 시도했지만 어쨌든 작동하지 않았습니다. 다음과 같이 클라이언트 측 스크립트를 사용하지만 $ (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에서 구현되지 않았습니다.
그냥 효과가 있습니다. 나는 특별히 크롬을 시도했고 이것이 계속 작동하고 다른 사람들을 돕길 바랍니다.
@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이 렌더링하는 것입니다.
더 나은 솔루션을 찾으면 알려주십시오.
'new-password'대신 사용 합니다'off' 자동 완성에 .
그리고 나는 또한이 코드를 사용해 보았고 (적어도 내 끝에서) 작동합니다. 정보를 위해 WP와 GravityForm을 사용합니다.
$('input').attr('autocomplete','new-password');
$('input').attr('autocomplete','off');