특정 조건을 만족하면 DOM이 나타나게 해 보자

요즘은 핸드폰으로 본인인증 많이 하는데, 그 인증창 보면 딸랑 이름 입력하는 란만 보인다. 그리고 이름을 입력하면 주민번호 입력란이, 주민번호 입력란을 다 채우면, 핸드폰 번호 입력란, 그리고 보안문자 입력란(이건 대충 사람입니다 체크하는거라고 보시면 될듯) 다음에 인증번호 입력란이 순차적으로 뜬다. 그러니까 이게 처음부터 떠있는 게 아니라 어떤 조건을 만족하면 뜬다 이거다.

 

뭐함? 이거 해볼거니까 빨리 에디터 켜요.

---

입력창 세 개와 버튼 하나가 보인다. 그리고 여기서 어떻게 할 거냐면

 

1. 이름을 입력하면 생년월일 입력창이 보이고

2. 생년월일 입력창을 다 채우면 연락처 입력하는 창이 보이고

3. 연락처를 입력하면 확인버튼이 보이는

 

걸 해 볼거다.

 

#no2 {
  display: none;
}

#no3 {
  display: none;
}

#no4 {
  display: none;
}

그래서 이름 입력란을 제외한 나머지는 다 display를 none으로 해 줬다.

 

const name = document.querySelector("#no1");
const nameInput = document.querySelector("#name");
const birthday = document.querySelector("#no2");
const birthInput = document.querySelector("#birthday");
const phone = document.querySelector("#no3");
const phoneInput = document.querySelector("#cellphone");
const button = document.querySelector("#no4");

어디가요 제어할라면 가져와야지.

 

근데 여기서 중요한 게 있다. 우리는 저기에 뭘 '채워 넣었을 때' 다음 창이 보이게 해야 하잖아요? 그러니까 이벤트 리스트너를 쓸 거면 쟤를 클릭할때 되게 하면 안 된다. 그리고 위에 뭐가 길어서 봤더니 입력란 달린 애들은 다 두줄씩 달고 있죠? 보여야 하는 건 div인데 값 갖고와야 하는 건 입력란이라 그렇다. 첫번째줄은 div, 두번째줄은 입력란이라고 생각하면 된다.

 

근데 애초에 저기에 이벤트 리스트너를 줄 수가 없음… 내가 해봤는데 안됨. 그럼 어떻게 해요? 값 가져와서 if문 때려박아봐야지.

 

nameInput.addEventListener("input",()=>{
  if (nameInput.value.trim() !== "") {
  birthday.style.display = "block";
  } else {
  birthday.style.display = "none";
  }
});

아니 쟤 인풋도 있어… 없는게 뭐야 대체… 그래서 이 코드가 뭐임? 말 그대로 입력하면 생년월일이 나오게 하는 코드다. 근데 문제가 하나 있다면 쟤는 입력을 하자마자 밑의 항목이 나오기때문에

 

성만 써도 이름이 나오는 것을 볼 수 있다. 아니 그럼 이름을 다 썼을 때 나오게 하려면 어떻게 해요?

 

nameInput.addEventListener("blur",()=>{
  if (nameInput.value.trim() !== "") {
  birthday.style.display = "block";
  } else {
  birthday.style.display = "none";
  }
});

이벤트 리스트너 안에 있는 input을 blur로 바꿔주면 이름을 다 쓰고 커서를 뗐을 때 생년월일 칸이 나온다.

 

birthInput.addEventListener('blur',()=>{
  if (birthInput.value.trim() !== "") {
    phone.style.display = "block";
  } else {
    phone.style.display = "none";
  }
});

같은 input이라 그런가 저 코드가 먹힌다. 그럼 폰 번호도 저렇게 하면 되나요? 일단 저렇게 해도 되긴 되는데, 핸드폰 번호의 경우 절차가 하나 더 필요하다. 뭔 절차요? 저거 유효성검사 하셔야죠.

 

const phoneRegex = /^01[016789]-?\d{3,4}-?\d{4}$/;

그래서 규식정씨를 불러야 한다. (정규식이라 규식 정)

 

phoneInput.addEventListener('blur',()=>{
  if (phoneRegex.test(phoneInput.value.trim())) {
    button.style.display = "block";    
  } else {
    phoneInput.style.borderColor = "#cc0000";
    button.style.display = "none";
  }
});

근데 저기 else에 들어간 건 뭐예요? 형식 안 맞으면 테두리 색깔 바꾸라는 얘기다.

 

전화번호는 3자리-4자리-4자리 혹은

 

11자리 숫자로 걍 쓰면 확인버튼이 보이는데 저 버튼은 눌러도 별 기능 없다.

 

그리고 형식이 안 맞으면 이렇게 빨간 테두리가 나오는 것.

 

근데 아까부터 저 if문에 들어가는 trim()은 뭔가요? 저건 문자 양 옆에 있는 공백을 다 떼버리라는 얘기다. 저걸 해주면 이름란에 공백만 입력한 경우에도 다음으로 안 넘어가게 된다. 물론 이름 앞뒤에 공백 들어가면 알아서 떼 주는 역할은 덤.

 

아까 그 빨간 테두리를 전체 영역으로 확장했다.

---

이벤트 리스트너의 blur는 이름을 입력하고 나서 커서를 입력란 말고 다른데다 둬야 이벤트를 실행하는데, 이조차 번거롭다! 하면 다른 방법도 있다.

 

nameInput.addEventListener("keydown",(e)=>{
  if (e.key === "Enter" && nameInput.value.trim() !== "") {
  nameInput.style.borderColor = "#000000";
  birthday.style.display = "block";
  } else {
  nameInput.style.borderColor = "#cc0000";
  birthday.style.display = "none";
  }
});

이벤트 리스트너의 blur를 키다운으로 바꾸고 if문에 1) 이름이 입력된 상태에서 2) 엔터키를 눌렀을 때 다음 입력란을 볼 수 있게 하면 된다. 근데 쟤는 위에 썼던 코드랑 달리 트리거 옆에 e가 있네요? 님 원래 저거 생략하지 않았음? 저걸 생략한 게 익명함수 김람다씨인데 김람다씨가 아무때나 다 쓸 수 있는 게 아니다. 마치 우리가 인터넷에서는 닉네임으로 활동하지만 송금할때는 본명이 필요하듯이 말이다. 김람다인 이유는 그냥 김씨가 흔해서다 그럼 저 e가 없으면 어떻게 되는데요? 컴퓨터가 타겟을 못 찾아서 뭔 엔터를 뭘 어쩌라는거냐면서 밥상을 뒤집습니다. 물론 진짜 밥상을 뒤집지는 않겠지만 아마 의도한대로 작동은 안 할거다. 

 

아니 근데 하는 김에 하나만 더 합시다. 이거 커서 다음 입력란으로 알아서 못 넘겨요?

nameInput.addEventListener("keydown",(e)=>{
  if (e.key === "Enter" && nameInput.value.trim() !== "") {
  nameInput.style.borderColor = "#000000";
  birthday.style.display = "block";
  birthInput.focus();
  } else {
  nameInput.style.borderColor = "#cc0000";
  birthday.style.display = "none";
  }
});

커서를 넘길 DOM.focus() 해 주면 알아서 다음으로 넘어간다.

 

See the Pen 조건부 DOM by koreanraichu (@koreanraichu) on CodePen.

버튼은 장식이니까 굳이 눌러보지는 말자. 진짜로 장식이다.