Two-factor code input

Medium
·
45 minutes

Prompt

Create a 4-digit security code input that allows you to enter a two-factor authorization code. It should resemble the screenshot below:

Implement a form submission handler that calls a submitCode(code) function with the 4 digits as a concatenated string. Implement a submitCode function that validates the code given against a hardcoded 4-digit string.

The inputs should be as usable as possible, specifically:

  1. Each field should allow only one digit between 0-9. Any other input should be rejected
  2. Entering a number in a field should advance the cursor to the next field, except in the case of the last field
  3. Pressing backspace at the beginning of a field (whether that field is populated or not) should focus the previous field and delete the input inside
  4. Very basic styling guidance:
    1. Inputs should be positioned next to one another
    2. Inputs should be roughly rectangular as pictured
    3. Submit button should be positioned below

Note: Pasting input into the field(s) is a complicated problem, addressed in one of the additional challenges. For the main problem, assume that copying and pasting a number into the field(s) results in undefined behavior.

Submitting solutions

  1. Create a solution by forking one of our CodePen templates:
  2. Submit your solution here

Hints

Additional challenges

Get future questions delivered straight to your inbox for free

Sign up and receive instant access to new questions when we publish them.

We‘ll only use your information to deliver new questions and to provide you updates about our product. We‘ll never spam you or sell your information without your consent. Unsubscribe at any time.