4489
Views
10
Comments
Solved
.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.

2020-10-08 19-51-35
João Barata
Staff
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,

UserImage.jpg
Samir khan

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.


2019-01-04 10-45-45
Sravan Vanteru

Hi ,

This one works well.

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


Sravan

UserImage.jpg
Samir khan

Sravan Vanteru wrote:

Hi ,

This one works well.

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


Sravan

not working in IOS. pls help


2018-09-11 04-38-49
Jitul Joy

Thanks all for the help

UserImage.jpg
Samir khan

Jitul Joy wrote:

Thanks all for the help

did this work for u?


UserImage.jpg
Samir khan

not working in IOS. pls help

UserImage.jpg
Joana Lourenço Tavares

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.

UserImage.jpg
Azhan Rizhan

Anyone managed to solve this? Android devices and Xcode Simulator working fine, just iOS device not working

2022-04-21 15-28-18
João Matias

I've tried the solution posted here, but it didn't work, I'm still facing this issue. Has anyone solved it?

Thank you.

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