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