JS/ 로그인 버튼 활성화 / addEventListener "keyup"이 아닌 "input" 사용해야 하는 이유

유효성 검사를 통해 조건 충족 시 로그인 버튼이 활성화 되는 기능 구현중,

input에 유저의 액션이 있을 때 유효성 검사를 하도록 하는데 addEventListener를 사용했다.

기존에는 addEventListener("keyup")을 사용했었는데, keyup이 아닌 input을 사용하는게 더 적합하다는 것을 알게 되었다.

---

keyup이 아닌 input을 사용해야 하는 이유

 

우선 지금 구현하고자 하는 기능에 대한 세부적인 조건에 대해 먼저 명시하자면,

(무조건적으로 keyup이 틀리고 input이 맞는 것은 아니다.)

 

HTML

<form id="login">
  <input type="text" class="loginId loginInput" name="userId" placeholder="전화번호, 사용자 이름 또는 이메일" />
  <input type="password" class="loginPw loginInput" name="userPw" placeholder="비밀번호" />
  <input type="button" class="loginBtn" value="로그인" />
</form>

JS

function loginForm (x) {
  return document.getElementsByClassName(x)[0]
}

loginForm("loginId").addEventListener("input", loginBtnOn)
loginForm("loginPw").addEventListener("input", loginBtnOn);

function loginBtnOn () { 

  const IdValue = loginForm("loginId").value;
  const PwValue = loginForm("loginPw").value;

  function btnOff () {
    loginForm("loginBtn").classList.remove("loginBtn_on")
  };

  function btnOn () {
    loginForm("loginBtn").classList.add("loginBtn_on")
  }

  (IdValue && PwValue != "" && IdValue.includes("@") === true && PwValue.length >= 5 ? btnOn() : btnOff() );

}

 

text 타입에서 유저의 정보를 받아 JavaScript로 유효성 검사 후 로그인 버튼을 활성화 하는 기능을

구현하고 있다.

 

---

loginForm("loginId").addEventListener("input", loginBtnOn)

위의 상황에서 이렇게 addEventListener("input")을 사용하고 있다.

이전에는 "keyup"을 사용했었는데 "keyup"을 사용할 경우의 단점을 알게되었다. 

 

keyup은 사용자가 키를 눌렀다가 뗐을 때를 말한다.

즉 키를 누르지 않거나, 누르고 있는 상황에서는 작동하지 않는 것이다.

여기서 "키를 누르지 않을 때"가 포인트이다.

 

그동안 나는 로그인할 때 키보드로 "직접" 타이핑을 해서 개인정보를 입력한다고 생각하고 당연히 keyup을 사용했다.

그런데 다시 생각해보니 나는 요즘 구글 아이디 비밀번호 자동 저장기능을 이용해 바로 입력하기 기능을 사용한다.

다시 말해, 나조차도 직접 타이핑을 하지않고 로그인 정보를 바로 입력하고 있다.

그런데 이런 상황에서 만약 keyup을 사용하는 사이트라면?

유저가 또 다시 키를 누르는 액션을 취하지 않을 경우에는 로그인 버튼이 활성화되지 않는다.

바로 이 지점에서 유저는 제대로된 정보를 입력했지만 로그인버튼이 활성화 되지 않는 오류가 발생할 수 있다.

 

 

그렇다면 input은 어떤 특성인가?

input은 말그대로 어떤 값이 들어오는 순간 바로 이벤트가 실행된다고 해석하고 다음 동작을 실행한다.

즉 유저가 어떤 방식으로든 값을 입력만 하면 작동하는 것이다.

키보드로 직접 타이핑을 하든, 복사 붙여넣기를 하든, 자동입력 기능을 이용하든 동일하게 동작한다.

그래서 keyup이 아닌 input을 사용하면 유저의 다양한 접근 방식에 대처가 가능해 불필요한 오류를 줄일 수 있게 된다.

 

실제로 내가 짠 코드로 테스트를 해보니 keyup을 사용했을 경우,

붙여넣기를 통해 값을 입력하면 유효성 검사 조건을 충족해도 로그인 버튼이 활성화되지 않았다.

하지만 input을 사용해 다시 테스트했을 때는 정상적으로 로그인 버튼이 활성화 되었다.

 

 

---

이번 실수를 통해,

유저의 행동을 미리 예측하고 코드를 짜는것이 개발자의 의무라는 생각을 다시 한번 했다.

기술이 발전함에 따라서 유저들은 점점 더 다양한 방식으로 서비스를 소비할 수 있다는 점을 인지하고

코드를 짤 때도 다각도에서 유저의 액션을 예측하는 노력이 필요하다.

 

 

 

잘못된 정보가 있다면 댓글로 피드백주세요. 확인 후 수정하겠습니다^-^

더 정확한 정보 혹은 더 효율적인 방식이 있을 경우 댓글로 의견을 공유해주세요!