브라우저에서 양식을 제출한 후 브라우저는 일반적으로 "비밀번호를 기억해야 합니까?"라는 메시지를 표시합니다. 확인 후 다음 번 양식을 제출할 때 특정 입력 상자가 자동으로 채워집니다.
그러나 일부 시나리오(예: 탈퇴 및 재충전 페이지)에서는 자동으로 비밀번호를 입력하는 것이 매우 안전하지 않습니다. 브라우저 자동 완성을 방지하려면 몇 가지 수단이 필요합니다.
해결 과정에서 몇 가지 함정에 빠졌습니다. 다음은 몇 가지 참고 사항입니다.
자동 완성 기능은 브라우저 자체에서 구현되므로 자동 완성 속성은 W3C 사양에 기록되지 않았습니다. 많은 브라우저는 이 속성을 무시합니다. 자동 완성은 비활성화할 수 없습니다.
js를 사용하여 페이지가 로드될 때 입력값을 공백으로 설정하는 방법을 생각하는 것은 당연하지만 브라우저의 자동 채우기는 실제로 js가 실행된 후에 채워집니다. . . js를 사용하여 입력 값을 비워둔 후 브라우저가 자동으로 입력을 채워 문제를 해결할 수 없었습니다.
인터넷에 널리 퍼지고 있는 방법이다. 이 방법은 대부분의 브라우저 버전에서 가능하지만 일부 상위 버전의 브라우저 및 Safari에서는 작동하지 않습니다. 나중에 소개되는 여러 가지 방법은 이 방법의 개선을 기반으로 합니다.
<!-- 추가 입력 --> <input type="password" style="display:none"/> <!-- 원래 입력 --> <입력 유형="비밀번호"/>
이 방법은 위의 방법에 비해 Safari에서 자동 채우기 문제를 해결합니다. 하지만 일부 상위 버전의 Chrome에서는 작동하지 않습니다. (테스트 후 Chrome 46.0은 작동하고 Chrome 47.0은 실패함)
<!-- 추가 양식 및 입력 --> <양식 스타일="표시:없음"> <입력 유형="비밀번호"/> </form> <!-- 원래 입력 --> <입력 유형="비밀번호"/>
이 솔루션은 위의 두 가지 방법을 결합하여 Chrome 47.0에서 자동 채우기 문제를 최종적으로 해결합니다.
<!--추가 콘텐츠--> <양식 스타일="표시:없음"> <입력 유형="비밀번호"/> </form> <input type="password" style="width:0;height:0;float:left;visibility:hidden"/> <!-- 원래 입력 --> <입력 유형="비밀번호"/>
이 방법에서 주의할 점은 대상 입력과 동일한 세대의 입력은 display:none으로 설정할 수 없다는 점이다. 설정하면 크롬 47.0에서는 자동으로 채워지므로 다른 수단만 사용할 수 있다. 이 입력을 숨기려면
마지막 솔루션을 사용한 후 다양한 브라우저에서 잘 실행되며 당분간 자동 채우기는 발견되지 않습니다. 물론 프런트 엔드 호환성 문제는 항상 역겨운 일이었습니다. .
이것으로 HTML이 브라우저의 비밀번호 입력 상자 기억 문제를 해결하는 방법에 대한 기사를 마칩니다. HTML의 비밀번호 입력 상자 기억에 대한 자세한 내용은 downcodes.com에서 이전 기사를 검색하거나 아래의 관련 기사를 계속 탐색해 보시기 바랍니다. downcodes.com 앞으로 더 많은 기능이 추가될 예정입니다!