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.

score 12 · Answer 1 · answered Feb 04 '14 at 18:44

12

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

answered Feb 04 '14 at 18:44

mld

519
6
15

this won't helped me. do you know how to stop resizing view when soft keyboard appears ? – abduIntegral Feb 10 '14 at 12:27
I've found a few people that mentioned adding "maximum-scale=1" to their viewport meta tag took care of the issue. That doesn't work for me since my app is mobile only and since iOS7 ends up in extreme zoom when installed on an iPad. – mld Feb 10 '14 at 15:53
I actually recently noticed this issue is iOS 10 and 11. This seems to have fixed it. – Rozgonyi Oct 25 '17 at 14:13
1

This didn't fix it for me, but chaging * to **html** did the trick. – Firze Jan 02 '18 at 12:57
Thanks, I had the same issue as you and this fixed it. – FreeZey Mar 23 '19 at 19:32
Got KeyboardDisplayRequiresUserAction set to false. Added this CSS. This answer not fix it for me. When I click in an unfocused field, the cursor briefly appears then disappears while the keyboard remains. Still need to touch it again in order for the cursor to reappear in the field. – Mozfet Jan 28 '20 at 15:42

score 2 · Answer 2 · edited Feb 23 '17 at 08:26

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.

edited Feb 23 '17 at 08:26

Shaun Lee

3
3

answered Aug 18 '14 at 22:50

Sam-Graham

1,254
12
20

This lets focus work and make the keyboard appear on focus, however when you then click in an unfocused field, the cursor briefly appears then disappears while the keyboard remains. – Mozfet Jan 28 '20 at 15:45

score 1 · Answer 3 · edited Jan 08 '20 at 15:24

1

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

edited Jan 08 '20 at 15:24

Robin C Samuel

1,215
15
33

answered Jan 30 '14 at 10:42

keldar

6,152
10
52
82

2

is there any trick possible to overcome this till they fix it. – abduIntegral Jan 30 '14 at 11:16

score 0 · Answer 4 · answered Jan 02 '18 at 13:17

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

score 0 · Answer 5 · answered Jan 03 '18 at 17:53

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.

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

5 Answers5