로그인이나 회원가입 폼을 만들다 보면 입력한 비밀번호를 사용자가 직접 확인할 수 있도록 표시/숨김 전환 기능을 넣는 경우가 많습니다. 이 기능은 JavaScript를 활용하면 몇 줄의 코드만으로 손쉽게 구현할 수 있습니다.
동작 원리
핵심 원리는 아주 간단합니다. 비밀번호 입력창(<input>)의 type 속성 값이 password일 때는 문자가 마스킹되어 표시되고, 이를 text로 변경하면 입력된 내용이 그대로 드러납니다. 따라서 체크박스의 클릭 이벤트에 따라 이 속성 값을 번갈아 바꿔주기만 하면 됩니다.
예제 코드
아래는 체크박스를 클릭할 때마다 비밀번호 표시 여부가 전환되는 완전한 HTML 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>비밀번호 표시 예제</title>
</head>
<body>
<h1>비밀번호 표시 예제</h1>
비밀번호:
<input type="password" value="abcd@1234" id="inputPass" /><br /><br />
<input class="check" type="checkbox" /> 비밀번호 표시
<h2>위 체크박스를 클릭하면 비밀번호가 텍스트로 표시됩니다.</h2>
<script>
document.querySelector(".check").addEventListener("click", showPass);
function showPass() {
var inputPassEle = document.getElementById("inputPass");
if (inputPassEle.type === "password") {
inputPassEle.type = "text";
} else {
inputPassEle.type = "password";
}
}
</script>
</body>
</html>코드 설명
- document.querySelector(".check")로 체크박스 요소를 선택하고, click 이벤트에 showPass 함수를 연결합니다.
- showPass 함수는 getElementById로 비밀번호 입력창을 가져온 뒤, 현재 type 값이 password라면 text로, 반대라면 다시 password로 변경합니다.
- 결과적으로 체크박스를 클릭할 때마다 비밀번호가 번갈아 가며 표시되고 숨겨집니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
체크박스를 선택하면(비밀번호 표시) 입력값이 텍스트 형태로 그대로 노출됩니다.
마무리
이처럼 type 속성 하나만 조작해도 비밀번호 표시 전환 기능을 쉽게 만들 수 있습니다. 실무에서는 체크박스 대신 눈 모양 아이콘 버튼을 사용하거나, 접근성을 고려해 aria-label 등을 함께 추가하는 방식으로 확장할 수도 있습니다.