[javascript] 입력 폼의 비활성화 및 활성화 처리

11 Dec 2023

javascript

사용자로부터 정보를 입력 받기 위해 웹 애플리케이션을 개발하고 있다면, 입력 폼의 비활성화 및 활성화 처리는 중요한 부분입니다. 사용자가 특정 조건을 충족할 때 입력 폼을 활성화하거나, 그 반대로 비활성화할 때 많은 도움이 됩니다.

1. 입력 폼의 비활성화

특정 조건이 충족되지 않을 때 입력 폼을 비활성화해야 하는 상황이 있을 수 있습니다. 예를 들어, 양식에 필요한 이메일 주소를 입력하지 않았을 때 로그인 버튼을 비활성화하는 것이 이에 해당합니다. JavaScript를 사용하여 이를 구현할 수 있습니다.

// 이메일 주소 입력란이 비어있을 때 로그인 버튼 비활성화
const emailInput = document.getElementById('email');
const loginButton = document.getElementById('login');

emailInput.addEventListener('input', function() {
  if (emailInput.value !== '') {
    loginButton.disabled = false; // 이메일 입력 시 로그인 버튼 활성화
  } else {
    loginButton.disabled = true; // 이메일 미입력 시 로그인 버튼 비활성화
  }
});

2. 입력 폼의 활성화

사용자가 특정 조건을 충족했을 때 입력 폼을 활성화하는 것도 필요하다고 생각됩니다. 예를 들어, 회원 가입 양식에서 비밀번호와 비밀번호 확인 값이 일치하는 경우 회원 가입 버튼을 활성화하는 방법입니다. 다시 JavaScript를 사용하여 이를 구현할 수 있습니다.

// 비밀번호 일치 시 회원 가입 버튼 활성화
const passwordInput = document.getElementById('password');
const confirmPasswordInput = document.getElementById('confirm-password');
const registerButton = document.getElementById('register');

confirmPasswordInput.addEventListener('input', function() {
  if (passwordInput.value === confirmPasswordInput.value) {
    registerButton.disabled = false; // 비밀번호 일치 시 회원 가입 버튼 활성화
  } else {
    registerButton.disabled = true; // 비밀번호 불일치 시 회원 가입 버튼 비활성화
  }
});

위의 예제는 JavaScript를 사용하여 입력 폼의 비활성화 및 활성화 처리하는 방법을 보여줍니다. 프로젝트에 따라 JQuery나 다른 프레임워크를 사용할 수도 있으니 참고하시기 바랍니다.

입력 폼의 비활성화 및 활성화 처리는 사용자 경험을 향상시키고 실수를 방지하는 중요한 부분이며, 웹 애플리케이션의 핵심적인 부분 중 하나입니다.

이상으로 입력 폼의 비활성화 및 활성화 처리에 대해 알아보았습니다. 추가 질문이 있으시면 언제든지 문의해주시기 바랍니다.

1. 입력 폼의 비활성화

2. 입력 폼의 활성화

참고 자료