암호 필드 가시성 전환

일반적인 사용 사례는 양식 작성기가 암호 필드에 입력된 텍스트의 가시성으로 전환할 수 있도록 하는 것입니다.
이 사용 사례를 수행하기 위해 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;
}

전환 암호 샘플 배포

recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e