lost focus of input text while keyboard appears - iOS PhoneGap Application

Question

i have an issue while developing phone gap application on iOS 7 using cordova 2.7 with html input text. when i select input text the keyboard pops up. but can't type anything as the focus is lost. i have to select again to enter text.

can anyone help me on this.

Answer 1

I ran into a similar issue where the keyboard would come up, but nothing typed shows up in the textbox. Mine was caused by css -

* {
  -webkit-user-select: none; /* prevent copy paste */
}

I fixed the issue by overriding the style for textboxes -

input[type="text"] {
    -webkit-user-select: text;
}

Answer 2

There is a config file inside cordova apps, config.xml where by default cordova does not allow you to control focus from javascript calls, this means that the keyboard can "disappear"

Change this:

<preference name="KeyboardDisplayRequiresUserAction" value="true" />

to

<preference name="KeyboardDisplayRequiresUserAction" value="false" />

and then just write an event handler for the field where it sets focus on itself when tapped inside a setTimeout. This worked really well for me recently.

Answer 3

This is a known issue which has already been logged with Cordova here: https://issues.apache.org/jira/browse/CB-5115. I would also like a workaround to this as it's not ideal.

Here is the workaround as explained there,

window.document.body.ontouchstart = (e) => {
  if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
    e.preventDefault();
    e.target.focus();
  }
};