The answer
Listen for keydown. If the key is Backspace and the current input is empty, focus the previous input. This lets the user go back to correct a digit.
How to Build an OTP Input Component in an Interview
How do you handle backspace in an OTP input component?
More FAQs in How to Build an OTP Input Component in an Interview
Create 4-6 input elements with maxlength=1. Add event listeners for input (auto-focus next, numeric only), keydown (backspace to previous), and paste (split pasted text across inputs). Add CSS for spacing and focus styling. Handle submit when all inputs are filled.
Auto-focus to the next box when a digit is entered, backspace to go to the previous box, only numeric input, paste support (paste a full OTP across boxes), and submit/auto-verify when all boxes are filled.
Listen for the paste event, prevent default, get the pasted text from clipboardData, filter to numeric only, and split each character across the input boxes starting from the current index. Focus the last filled input.
Still have questions?
Browse all our FAQs or reach out to our support team
Want to upskill yourself?
Your learning library
Small steps. Big possibilities.
Find your next course. Build something great.