>  기사  >  웹 프론트엔드  >  JavaScript에서 비밀번호 가시성 전환(표시 및 숨기기)을 구현하는 방법

JavaScript에서 비밀번호 가시성 전환(표시 및 숨기기)을 구현하는 방법

云罗郡主
云罗郡主앞으로
2018-11-27 15:54:443904검색

이 글의 내용은 자바스크립트에서 비밀번호 표시 전환(표시 및 숨기기)을 구현하는 방법에 대한 내용입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

JavaScript에서 비밀번호 가시성 전환(표시 및 숨기기)을 구현하는 방법

프런트엔드 비밀번호 표시 전환(표시 및 숨김) 효과는 다들 보셨을 테니 더 이상 말하지 않겠습니다.

기본적으로 입력된 비밀번호의 입력태그는 type="password"이며, 기본 비밀번호는 점이나 별표로 표시됩니다. 비밀번호를 표시하려면 유형을 "텍스트"로 변경해야 합니다. 이 효과는 Chrome, FireFox 등의 브라우저에서 입력 태그의 type 속성을 수정하면 쉽게 얻을 수 있지만 IE에서는 오류가 보고됩니다. IE와의 호환성이 필요한 경우 다른 옵션을 고려해야 합니다.

여기서 몇 가지 참고할 사항이 있습니다.

예제는 전체 입력 태그 구성표를 대체하므로 IE

#🎜🎜와 호환됩니다. #눈 차트 아이콘 글꼴을 사용하면 CSS를 사용하여 전환하는 것이 더 쉽습니다.

IE10+ 브라우저에서 비밀번호 입력 상자가 나타나면 상자에 작은 눈 아이콘이 표시됩니다. 일반 텍스트 입력 상자인 IE10의 경우에도 비밀번호가 표시됩니다. 클릭하면 텍스트 상자에 입력된 내용을 지울 수 있습니다. IE10에 포함된 두 가지 기능을 적용하지 않으려면 CSS에 추가하세요.

CSS 코드: #🎜 🎜#
input::-ms-clear {display:none;}
input::-ms-reveal {display:none;}

IE 브라우저에 대한 이 두 가지 CSS 정의는 IE 브라우저의 자동 텍스트 지우기 및 비밀번호 표시 기능을 제거할 수 있습니다.

위는 JavaScript가 비밀번호 표시 전환(표시 및 숨기기)을 구현하는 방법에 대한 완전한 소개입니다.

JavaScriptTutorial

에 대해 더 알고 싶으시면 PHP에 주목하세요. 중국 웹사이트 .

위 내용은 JavaScript에서 비밀번호 가시성 전환(표시 및 숨기기)을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 css88.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제