암호 필드 가시성 전환
일반적인 사용 사례는 양식 작성기가 암호 필드에 입력된 텍스트의 가시성으로 전환할 수 있도록 하는 것입니다.
이 사용 사례를 수행하기 위해 Font Awesome Library의 눈 모양 아이콘을 사용했습니다. 필수 CSS와 eye.svg는 이 데모용으로 만든 클라이언트 라이브러리에 포함됩니다.
샘플 코드
적응형 양식에 ssnField(이)라는 PasswordBox 유형의 필드가 있습니다.
다음 코드는 양식을 로드할 때 실행됩니다
$(document).ready(function() {
$(".ssnField").append("<p id='fisheye' style='color: Dodgerblue';><i class='fa fa-eye'></i></p>");
$(document).on('click', 'p', function() {
var type = $(".ssnField").find("input").attr("type");
if (type == "text") {
$(".ssnField").find("input").attr("type", "password");
}
if (type == "password") {
$(".ssnField").find("input").attr("type", "text");
}
});
});
다음 CSS를 사용하여 eye 아이콘을 암호 필드 내에 배치했습니다.
.svg-inline--fa {
/* display: inline-block; */
font-size: inherit;
height: 1em;
overflow: visible;
vertical-align: -.125em;
position: absolute;
top: 45px;
right: 40px;
}
전환 암호 샘플 배포
- 클라이언트 라이브러리 다운로드
- 샘플 양식 다운로드
- 패키지 관리자 UI를 사용하여 클라이언트 라이브러리 가져오기
- Forms 및 문서를 사용하여 샘플 양식 가져오기
- 양식 미리 보기
recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e