iOS | Keypad gets hidden when Input focus change to another text-input by JS | Mobile

Greetings Folks,

I have 2 Input-Textbox, I am switching the focus by JavaScript when the user enters 4-characters, using the onChange Action of the Input-Text Box.

JS : I am using to Switch Focus to another Input:

document.getElementById($parameters.InputFirstID).blur();

document.getElementById($parameters.InputSecondID).focus();
document.getElementById($parameters.InputSecondID).style.visibility = 'visible';


This is working perfect with the android phone but when it comes to iOS devices... The Keypad gets Hidden when the Focus changed & User has to Manually tap on another text-input to type. I observe even the cursor does not show in another text-box while the input focus is shifted.

I even tried only using this:

document.getElementById($parameters.InputSecondID).focus();
document.getElementById($parameters.InputSecondID).style.visibility = 'visible';


Referring to a post on StackOverflow, I even added this to the configuration :

"ios": [{
            "name": "KeyboardDisplayRequiresUserAction",
            "value": "false"
        }]

KeyboardDisplayRequiresUserAction (boolean, defaults to true) : set to false to open the keyboard when form elements get focus via the JavaScript focus() call.


Any help much appreciated,

Thanks

assif_tiger wrote:

I am switching the focus by JavaScript when the user enters 4-characters, using the onChange Action of the Input-Text Box.

What is the reason behind changing the focus after 4 characters? 

Just wondering if maybe there's a simpler solution that does not require JavaScript to change focus, which would potentially be an odd thing from a user experience standpoint anyway.


Hi G. Andrew Duthie,

That's my requirement of Screen, Where User will enter a 12 digit code in 3 input-box i.e 4 char in each.

It's working smoothly on Android, also on iOS apart from the Keypad Hide issue.

Where are you passing the configuration info (the config for KeyboardDisplayRequiresUserAction)?

I'm not sure if this is a parameter you can set without creating a plugin.

You might have a look at this Forge plugin to see if it will help you work around the issue:

https://www.outsystems.com/forge/component-overview/1711/keyboard-plugin

G. Andrew Duthie wrote:

You might have a look at this Forge plugin to see if it will help you work around the issue:

https://www.outsystems.com/forge/component-overview/1711/keyboard-plugin

Didn't work for me.
Same issue :(


Hi assif_tiger,

All you need to do is Set action for first two Input-TextBoxes and implement that on change action as:

Script is document.getElementById($parameters.inputId).focus();

I hope it will help you!


Cheers.

Hi Kiran Shinde,

Ya, I if you see the post as I mentioned I already Implemented by the same approach.

It's working perfectly on Android but not on iOS.


Hi assif_tiger,

I have tested it by Outsystems now in iPhone 5s and it worked for me.