键盘出现时输入文本失去焦点 - iOS PhoneGap 应用程序

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();
  }
};

Answer 4

I ran into this issue and found out I had fixed it in another Phonegap project using this. It's basically same as @mld answer, but using html. Using * doesn't work for my app on iOS.

html {
  -webkit-user-select: none; /* prevent text selection */
}

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

Answer 5

I had this issue in an Ionic V1 / Angular 1.5 project. This fix worked for me:

window.addEventListener('native.keyboardshow', function () {
  if ( document.activeElement != document.getElementById('my-input') && document.activeElement.nodeName != 'INPUT' ){
    document.getElementById('my-input').focus()
  }
});

When we tap the input, the keyboard comes up. We can then check if our input element is actually focused. If not, we manually focus it. If it's another input, we won't focus it.

I called this inside my component's $onInit function - make sure to remove the event listener when your component is destroyed with $onDestroy . This also assumes you're using the ionic-plugin-keyboard plugin.

This works well with one input, but if you have multiple inputs on the same page, you will probably need additional logic to prevent your app from focusing on the wrong input when the keyboard opens.