입력 폼에서 사용자가 입력한 비밀번호를 숨겨서 보안을 강화하는 것은 중요합니다. 그러나 때때로 사용자가 입력한 내용을 확인할 필요가 있을 수 있습니다. 이때 비밀번호 필드의 값을 숨김으로 설정하기 위한 JavaScript 코드를 작성할 수 있습니다.

HTML 입력 폼

먼저, HTML에서 비밀번호를 입력하는 필드를 만들어야 합니다. 보통은 다음과 같이 <input> 요소를 사용하여 비밀번호를 받습니다.

<input type="password" id="passwordField" />
<button onclick="togglePasswordVisibility()">비밀번호 표시/숨김</button>

위 코드에서는 id가 “passwordField”인 input 요소와 비밀번호를 표시/숨김할 수 있는 버튼을 만들었습니다.

JavaScript 코드

이제 JavaScript를 사용하여 이벤트를 처리하고, 비밀번호를 숨김 또는 표시하도록 만들어보겠습니다.

function togglePasswordVisibility() {
  const passwordField = document.getElementById('passwordField');
  if (passwordField.type === 'password') {
    passwordField.type = 'text';
  } else {
    passwordField.type = 'password';
  }
}

위 코드에서는 togglePasswordVisibility 함수를 정의하여, 해당 함수가 호출될 때마다 passwordField 요소의 type 속성을 ‘password’와 ‘text’ 사이에서 토글합니다.

결과

이제 사용자가 입력한 비밀번호를 해당 필드에 입력한 후, “비밀번호 표시/숨김” 버튼을 클릭하면 해당 비밀번호가 숨겨졌다가 표시될 것입니다.

위의 코드를 이용하면 사용자가 입력한 비밀번호를 숨기며, 필요 시 편리하게 확인할 수 있는 기능을 구현할 수 있습니다.

결론

이러한 방법을 사용하면 사용자가 입력한 비밀번호를 안전하게 숨기고, 필요한 경우에만 쉽게 확인할 수 있게 됩니다. 이와 같은 유연성을 제공하는 것은 사용자 경험을 향상시키는 데 도움이 될 것입니다.

참고 자료

• MDN web docs - Input type=password