Hello!
I want to create a Pin login screen with an specific behavior and I’m getting lost. Could you please give me a hand?
The functionality I want to replicate is already done using HTML/JavaScript (http://nakaji-dayo.github.io/ios-safari-passcode-boxes/) but I cannot replicate it using Ionic input fields.
The desired behavior is:
- Display a page with four text input (maxlength: 1) and the keyboard already shown for filling in directly a 4 digits number.
- Once a keyboard number is clicked, it’s shown on the corresponding input text, the focus is moved to the next empty field (till the latest) and the keyboard is always displayed (keyboard back key also should work).
I drew the four input fields but the keyboard behavior was very strange: the keyboard is hidden/displayed when moving from one input text to another. So I thought on a hidden text input field over four readonly text input, so the user will write on a hidden field that will populate the read only text inputs.
Can I add a hidden text input with autofocus (keyboard should appear after the page load) over others text fields with Ionic?? Maybe I can display the hidden field over the others with CSS z-index attribute.
Is there another way to do that?
Many thanks!
Sergi