엔터키 이벤트가 먼저 실행이 안될때

 

input 창에 클릭,엔터키 이벤트를 주려고 했다.

 

 

하지만 아래의 코드로 작성을 하니

버튼을 먼저 클릭 해야지(클릭이벤트를 먼저 실행) 엔터키 이벤트가 실행이 됬다.

 

해결방법을 찾던 중 아래의 블로그를 발견했는데 

 

https://velog.io/@hidaehyunlee/ES2020-click-enter-%EB%91%90-%EA%B0%9C%EC%9D%98-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%8F%99%EC%8B%9C%EC%97%90-%EB%93%B1%EB%A1%9D%ED%95%98%EA%B8%B0

[ES2020] Click, Enter 두 개의 이벤트 동시에 등록하기

 

나와 비슷한 문제점을 가지고 있었고 아래와 같은 해결책을 내줬다.

 

처음에는 click 이벤트를 만들었을 떄 처럼 입력 button 태그에 이벤트를 등록해야 될거라고 생각했다. 안되는 게 당연하다. 사실 우리가 보통 로그인할 때를 생각해보면 아이디/비밀번호를 입력한다음에 엔터를 누른다.

즉, 키보드이벤트는 사용자로부터 입력받은 값을 keyCode에 저장해서, 그게 enter의 키코드 값과 일치하는지 확인하는 것이기 때문에 input 태그에 등록해야한다.

 

 

그래서 해결한 결과

 

input에 focus()메서드를 준 후

엔터키 이벤트를 줬더니 문제없이 해결이 됬다.