.focus() within iOS mobile is not opening keyboard
Question

Hi All,

I have Mobile app containing a credit card details page. For this particular field there are 4 text boxes. Upon entering details within one text box my focus should shift automatically to the next input box. 

I am currently using "$("#ATMCardNumber").focus();" which seems to be working on Android devices however for the iOS devices the keyboard does not automatically open after the change of focus.

Solution

Hi Jitul,


In order to be able to use javascript to focus an input in IOS, you need to add an extra configuration on your application in the Extensibility configuration.

You can learn more about it on the following link:

https://success.outsystems.com/Documentation/11/Delivering_Mobile_Apps/Customize_Your_Mobile_App/Set_the_Preferences_for_Your_Mobile_App


As for the configuration needed, it should be the "KeyboardDisplayRequiresUserAction" = "False".


https://cordova.apache.org/docs/en/latest/config_ref/

Your config could look like the following:



image.png


After adding it and generating a new native build ( whenever you change the Extensibility configuration you will need to generate a new native build) you should be able to start using focus with javascript.

Just a quick remark, looking at the javascript code you are using, it seems you are still relying on Jquery. Although you can still use that, it will require you to import the full Jquery library to your application. If all you are doing is using it to get the DOM elements, consider using plain javascript for that.

For this particular example, you could replace your JS code with

document.getElementById("ATMCardNumber").focus();

Hope this helps,

João Barata wrote:

Hi Jitul,


In order to be able to use javascript to focus an input in IOS, you need to add an extra configuration on your application in the Extensibility configuration.

You can learn more about it on the following link:

https://success.outsystems.com/Documentation/11/Delivering_Mobile_Apps/Customize_Your_Mobile_App/Set_the_Preferences_for_Your_Mobile_App


As for the configuration needed, it should be the "KeyboardDisplayRequiresUserAction" = "False".


https://cordova.apache.org/docs/en/latest/config_ref/

Your config could look like the following:



image.png


After adding it and generating a new native build ( whenever you change the Extensibility configuration you will need to generate a new native build) you should be able to start using focus with javascript.

Just a quick remark, looking at the javascript code you are using, it seems you are still relying on Jquery. Although you can still use that, it will require you to import the full Jquery library to your application. If all you are doing is using it to get the DOM elements, consider using plain javascript for that.

For this particular example, you could replace your JS code with

document.getElementById("ATMCardNumber").focus();

Hope this helps,

That didn't worked for me. its focusing but keyboard is not appearing.


Hi ,

This one works well.

document.body.ontouchend = function() { document.querySelector('#ATMCardNumber').focus(); };


Sravan

Sravan Vanteru wrote:

Hi ,

This one works well.

document.body.ontouchend = function() { document.querySelector('#ATMCardNumber').focus(); };


Sravan

not working in IOS. pls help


Thanks all for the help

Jitul Joy wrote:

Thanks all for the help

did this work for u?


not working in IOS. pls help

Hey all, 

I still couldn't solve this issue. I want to have focus on input and keyboard open when I navigate to a new screen. It is working on Android but not in IOS.

Does anyone know how to really solve this?

Thank you in advance.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.