여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. 비밀번호 보기 버튼 만들기
비밀번호 보기 버튼 만들기
2년전 작성
2년전 수정

인터넷 찾아보다가 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인 요소를 감춘다.

기본 예시

Mingg`s Diary
밍구
밍구
공부 목적 블로그