For a small, mobile first (web)application, I'm trying to create a pin / password input (mask), something like:
+---+ +---+ +---+ +---+
| 1 | | 2 | | 3 | | 4 |
+---+ +---+ +---+ +---+
During the implementation of various solutions, the user experience became either unpredictable or confusing, which I hope I can overcome... The options below list the findings I came across, demo: implementation of the three solutions (simplified)
Multiple inputs
- Unable to detect backspace (during keydown / keyup) on mobile; this makes navigating to the previous input field, when backspace is pressed and the field is empty, hard to implement.
- Unable to use the 'double tap shift' functionality on the soft-keyboard; focusing (by user action / scripting) to the next input gives a 'jumping' keyboard (either way in combination with 'double tap shift' autocapitalize on or off)
Letter-spacing combined with a background repeating-linear-gradient (both calculated)
- Letter-spacing is somewhat different implemented than one might expect, characters always end with 'letter-spacing', instead of having space between the characters. This causes a horizontal scroll to occur when the 'end' of the input field has been reached
- Removing a character, shifts the whole string, instead of 'emptying' the removed character
Word-spacing (appending a space after each character) with a background repeating-linear-gradient (both calculated)
- Removing a character, shifts the whole string, instead of 'emptying' the removed character
So the question is somewhat twofold; first, I may have missed another solution(?) Second, for the solutions mentioned the findings listed can be can be 'countered'(?)
