암호 필드 가시성 전환

일반적인 사용 사례는 양식 필터가 암호 필드에 입력한 텍스트의 가시성으로 전환할 수 있도록 하는 것입니다.
이 사용 사례를 수행하기 위해 Font Awesome 라이브러리. 필요한 CSS 및 eye.svg는 이 데모용으로 만든 클라이언트 라이브러리에 포함되어 있습니다.

샘플 코드

적응형 양식에는 다음과 같은 PasswordBox 유형의 필드가 있습니다. ssnField.

양식이 로드되면 다음 코드가 실행됩니다

$(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를 사용하여 눈 암호 필드 내의 아이콘

.svg-inline--fa {
    /* display: inline-block; */
    font-size: inherit;
    height: 1em;
    overflow: visible;
    vertical-align: -.125em;
    position: absolute;
    top: 45px;
    right: 40px;
}

암호 전환 샘플 배포

이 페이지에서는