7

In my mobile web app, clicking in the textarea box brings up the keyboard on iOS but not on Android Chrome browser. The Android keyboard flashes up and then goes away.

I have read through these posts...

My understanding is that the following is happening:

  1. Clicking in textarea triggers a focus event
  2. Focus event triggers keyboard to open
  3. Keyboard open triggers window resize event
  4. Resize event triggers blur (Android only)
  5. Blur event triggers keyboard to close

I tried adding a focus event listener and then called focus() again, but that put me into an infinite loop where the keyboard flashes/disappears/flashes/disappears. Is there a way to make the keyboard stay active and not blur the form element during window resize? Any other tips here?

bholben
  • 1,077
  • 1
  • 15
  • 24
  • blur? why that? – Luca Kiebel Dec 07 '17 at 19:19
  • It appears the resize is triggering a blur on the form element – bholben Dec 07 '17 at 19:34
  • 3
    Turns out the blur was being caused by something else and the Android devices were the only ones with screen aspect ratios that picked it up. The keyboard reduced the screen height to the point where it became wider than tall. At this point, a CSS landscape media query was kicking in and hiding the form element and this removed the focus - and closed the keyboard. It was hard to spot since it happened in a fraction of a second. – bholben Dec 08 '17 at 21:39
  • 1
    @bholben what was your fix for this? – Dean Dec 23 '18 at 14:10
  • is there any solution for this issue? – Ketu Aug 02 '19 at 10:13
  • @bholben thanks for that comment! that was my problem too. You should post that comment as a solution and accept it – Kevin Jantzer Jul 13 '20 at 19:38

0 Answers0