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