OTP Input Auto-Focus Implementation in JavaScript

OTP Input Auto-Focus Implementation in JavaScript

Auto-focus is the core feature of the OTP input. Here is how to implement forward and backward navigation.

Forward Navigation (Auto-Focus Next)

input.addEventListener("input", (e) => {
  const value = e.target.value.replace(/\D/g, "");
  e.target.value = value;
  if (value && index < inputs.length - 1) {
    inputs[index + 1].focus();
  }
});
``
When the user types a digit, focus moves to the next input. The condition `index < inputs.length - 1` prevents focusing beyond the last input.

### Backward Navigation (Backspace)

```js
input.addEventListener("keydown", (e) => {
  if (e.key === "Backspace" && !e.target.value && index > 0) {
    inputs[index - 1].focus();
  }
});
``
When the user presses Backspace on an empty input, focus moves to the previous input. The condition `!e.target.value` ensures we only go back when the current input is already empty (not when clearing a digit).

### Arrow Key Navigation

```js
input.addEventListener("keyup", (e) => {
  if (e.key === "ArrowLeft" && index > 0) inputs[index - 1].focus();
  if (e.key === "ArrowRight" && index < inputs.length - 1) inputs[index + 1].focus();
});
``
Arrow keys let the user navigate without typing. This improves UX for correction.

### Focus Styling

```css
.otp-input:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.2);
}
``
Visual feedback on focus is important for UX. The user needs to see which input is active.

### Edge Cases

- Typing in a filled input: replace the existing value.
- Tab key: let the browser handle default tab navigation.
- Focus on click: clicking any input should focus it (default behavior).
- Mobile: inputmode="numeric" shows the numeric keyboard.

### The Takeaway

Auto-focus: on input, focus the next input (if not last). On Backspace (empty input), focus the previous. Arrow keys for manual navigation. CSS focus styling for visual feedback. Handle edge cases (filled inputs, tab key, mobile keyboard).