Use native keypad or custom one in web application

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" <input> tag
  • (-) 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?

Code entry view

Tags: