The virtual keyboard hides the / textareas / contenteditable fields (hidden under the keyboard)

Question

I know that there are already some StackOverflow threads about the virtual keyboard of mobile phones hiding or blocking input fields, text areas and so on. But all these threads were useless, I searched a lot, but many talked about this issue based on Android development, and some of them are based on web development.

I focus on web development. The problem is that there is not a single topic in which the problem has been resolved or any really useful answer has been provided / published.

So, I started this one with the hope that it will be resolved now. So what is the problem directly?

If you click on the area where something can be entered on the mobile device, you usually expect the website to scroll up and the virtual keyboard to open after the editable area, but what happens is wrong. The virtual keyboard opens just like an overlay - it begins to overlap the editing area.

In my case, I open the jQuery UI dialog where my fields are located, but I think it doesn't matter.

So, I let my thoughts cross and came to a decision to add extra space. Something like this: JSFiddle .

So, I can scroll down. But it’s annoying that it is useless or in other words that people don’t need, who don’t use the device that opens the virtual keyboard. So I thought of a function like this:

function isMobileDevice() { var isiPhone = navigator.userAgent.toLowerCase().indexOf("iphone"); var isiPad = navigator.userAgent.toLowerCase().indexOf("ipad"); var isiPod = navigator.userAgent.toLowerCase().indexOf("ipod"); var isAndroid = navigator.userAgent.toLowerCase().indexOf("android"); if (isiPhone > -1 || isiPad > -1 || isiPod > -1 || isAndroid > -1) { return true } else { return false; } } 

Well, for this part, my question would be, I forgot the device that also opens the virtual keyboard, and the main question will be, is there anything else but my workaround? I did not find something to explicitly recognize the virtual keyboard.

Edit 04.24.2015:

Guys, I just tested it using Samsung Galaxy Note and the latest browser versions for Firefox, Chrome and Opera. (Updated all three today!)

Ok, here is my result:

as you can see that all browsers except Firefox fail, and this is a perfect visual example of my problem. The virtual keyboard covers the editing area! I usually prefer Chrome over any other browser, but for this case I have to say - Firefox works well!

Answer 1

... from the look of the photos that were posted, you should use a scrollable scrollable element with height:100% to store the content. I'm right?

If this is the case, that is why the virtual keyboard overlaps your content: virtual keyboards tend to press the contents of the body to focus on input elements and not . In this case, the body content does not move, so the virtual keyboard simply overlaps your content. I don’t know if the Mozilla developers have spent more time on this particular problem, but it looks like they did.

Edit: I answered the question without first reading the comments, and it seems I already commented, but it looks like my comment was ignored. I wonder why, since I’m probably on the spot.: /