[JS] Delete vs Backspace: 키 이벤트 처리 시 주의사항 (with. OTP 입력기)
1. 들어가며OTP 입력창은 인증번호를 입력할 때 가장 흔히 마주하는 UI다. 각 칸에 한 글자씩 입력되도록 설계되어 있어, 사용자는 키보드로 빠르게 인증을 완료할 수 있다.[ apple의 OTP 입력창 동작 예시 ]그러나 이 단순해 보이는 UI를 구현할 때 간과하기 쉬운 부분이 있다. 바로 Delete 키의 처리이다. 대게 입력을 지울 때 Backspace 키를 떠올리지만, Delete 키도 입력 삭제에 사용되므로, Delete 키가 작동하지 않으면 해당 키를 사용하는 사용자는 “버튼이 먹지 않는다”는 의문을 가질 수 있다.그럼, OTP 입력 UI에서 Delete 키를 어떻게 구현해야 할까? 단순히 input 이벤트만으로 처리하면 될까?input 이벤트만으로는 부족하다!OTP 입력창에서는 값이 변경되었..
2025. 3. 29.
