onChange + onBlur

JS onChange 일 때 유효성 체크해서 못 나가도록 focus 하는 메소드를 만들었습니다. 근데 한 번만 적용이 되고 그 이후로는 focus가 안 돼요. 아예 밖으로 못 빠져나가게 못 하나요?

 

onChange 이벤트에서 유효성 체크 후 focus를 하는 방식은 한 번만 작동하는 이유가, 브라우저가 해당 요소의 focus 이벤트를 기본적으로 한 번만 처리하기 때문일 수 있습니다. 특히 SPA(싱글 페이지 애플리케이션)에서 한 번 focus가 동작한 뒤 blur 이벤트가 발생하면 이후의 focus 동작이 정상적으로 작동하지 않을 수 있습니다.

이를 해결하려면 onBlur 이벤트도 함께 활용하여 유효성 검사를 계속 수행하게 할 수 있습니다. 이렇게 하면 사용자가 포커스를 벗어나려 할 때마다 유효성 검사를 실행해 계속적으로 focus를 다시 잡아줄 수 있습니다.