I'm tasked to implement a code entry view which allows you to enter a 6-digit code. The UI runs in the browser (JS/HTML/CSS), mobile touch devices only.
I'm stuck on how to implement this, basically I came up with these two scenarios:
Use the native built-in keypad
- (+) Built-in, accessibility
- (-) Requires an initial tap to trigger the keypad
- (-) Requires at least one "invisible"
- (-) Handle "zoom-in" on the input field so that all digits are visible
- (-) Handle blinking cursor alignment with digits or use six separate input boxes with proper alignment and switch focus after each entered digit.
- (-) Relies heavily on how device handles/renders input fields.
Use a custom HTML/JS keyboard, basically a grid of buttons
- (-) Accessibility
- (-) Keypad needs to fit on screen on every device
- (+) No initial tap required to trigger a keypad
- (+) Consistent look and feel
What are your thoughts about this?