인터넷 찾아보다가 jsfiddle에서 코드를 하나 발견했다.
https://jsfiddle.net/alikong/mshf9nv4/ 코드를 뜯어보자.
비밀번호 보기 버튼
웹 사이트를 이용하는 중 비밀번호 입력하는 칸에 SHOW 버튼이 있는 칸을 보곤한다.
어떻게 SHOW 버튼을 만들 수 있는지 방법을 알아보자.
코드
HTML
SHOW
CSS
* {
font-family: arial;
}
*:focus {
outline: none;
}
body {
min-height: 130px;
font-size: 12px;
}
#key {
width: 200px;
margin: 10px 10px 10px 0;
border: 1px solid grey;
padding: 10px 40px 10px 10px;
}
#key:focus {
border-color: orange;
}
#keyShow {
position: absolute;
display: none;
margin-left: -50px;
margin-top: 24px;
font-size: 9px;
cursor: pointer;
color: grey;
}
#checkKey {
height: 39px;
}
Javascript
$("#key").on("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
$("#checkKey").triggerHandler("click");
}
else {
if (this.value) {
$("#keyShow").css("display", "inline-block");
}
else {
$("#keyShow").hide();
}
}
}).focus();
$("#keyShow").on("click", function() {
if ($("#key").attr("type") == "password") {
$("#key").attr("type", "text");
$($(this)).text("H I D E");
}
else {
$("#key").attr("type", "password");
$($(this)).text("SHOW");
}
});
사용된 코드 설명
$(“#key”).on(“keyup”, function(event) { … }
:
요소의 아이디가 key인 항목에 키보드 입력 후 키에서 손을 떼면 event 함수를 실행한다.
if (event.keyCode === 13)
:
Enter에서 손을 떼면 조건에 부합한다.
event.preventDefault();
:
어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정한다.
$(“#checkKey”).triggerHandler(“click”);
:
요소의 아이디가 checkKey인 항목을 click 동작은 실행하지 않고 핸들러 함수만 실행한다.
if (this.value) { $(“#keyShow”).css(“display”, “inline-block”); }
:
값이 있다면 ID가 keyshow인 요소에 display: inline-block; CSS를 추가한다.
else { $(“#keyShow”).hide(); }
:
그렇지 않다면 ID가 keyshow인 요소를 감춘다.
기본 예시
공부 목적 블로그