입력을 표시하는 암호 옵션

HTML은 비밀번호를 특별히 처리하는 입력 유형을 제공합니다.

<input type="password">

이 유형의 경우 입력 할 때 흐릿하게 표시되는 포인트 :

••••••••••

이것은 보안을 향상시키기 위해 웹 페이지에서 취한 측정입니다. 이 기능이 없으면 다른 사람들이 엿보기로 비밀번호를 쉽게 얻을 수 있습니다.

그러나 사용자 경험도 끊임없이 향상되고 있으며 이제는 일반적으로 옵션이 있습니다.

☑️ 암호 표시?

이런 식으로 사용자는 비밀번호를 표시할지 여부를 선택할 수 있습니다. 대부분의 사용자는 비밀번호를 입력하기 전에 주변을 둘러보고, 아무도 엿보지 않는지 확인한 다음 비밀번호를 표시하여 비밀번호를 올바르게 입력했는지 확인하고 잘못된 비밀번호를 여러 번 입력하여 발생하는 문제를 피할 수 있습니다.

그래서 어떻게 달성 하는가?

방법 1 : JavaScript를 사용하여 switch type="password" 및 type="text"

이것은 모든 브라우저에서 잘 작동하기 때문에 현재 가장 일반적으로 사용되는 방법입니다.

 const input = document.querySelector ( ". 비밀번호 입력");
// 확인란이 선택되면 ...
if (input.getAttribute ( "type") === "password") {
  input.setattribute ( "type", "text");
} 또 다른 {
  input.setattribute ( "type", "password");
}

이 방법의 문제점은 입력 유형을 변경하여 암호 표시/숨기기 기능을 구현해야한다는 것입니다. 더 중요한 것은 암호 관리자 도구와 충돌 할 수 있다는 것입니다. 입력 유형을 수정하면 암호 관리자 (브라우저의 내장 암호 관리자 포함)가 인식되지 않거나 비밀번호를 자동으로 채울 수 있습니다.

방법 2 : CSS에서 -webkit-text-security ​​사용하십시오

이 속성은 일부 브라우저에서만 유효하기 때문에 이것은 실행 가능한 솔루션이 아닙니다. 그러나 누군가 가이 기능을 일부 브라우저에서 작동하기 때문에이 기능을 CSS로 마이그레이션하기를 원했던 것은 분명합니다.

 입력 [type = "password"] {
  -webkit-text-security : square;
}
form.show-passwords input [type = "password"] {
  -webkit-text-security : 없음;
}

방법 3 : CSS에서 input-security 사용

현재 input-security 대한 초안 편집 사양이 있습니다. 본질적으로 토글 값입니다.

 form.show-passwords input [type = "password"] {
  입력 보안 : 없음;
}

이 방법은 간결하고 명확합니다. 그러나 아직 브라우저는 아직 지원하지 않습니다. 따라서 현재 방법 1 만 사용할 수 있습니다.

데모 (모든 방법)

위 내용은 입력을 표시하는 암호 옵션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!