Virtual Keyboard hides fields/textareas/contenteditable (hidden below keyboard)

Question

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

I focus on web development. The problem is, there is NO thread where the problem was solved or any really useful answer was given/posted.

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

If you click on an area where something can be entered, on a mobile device, you would usually expect that the website scroll up and the virtual keyboard is opening after the editable area, but what happen is not like this. The virtual keyboard is opening just as an overlay - It starts overlapping the editable area.

In my case, I open a jQuery UI dialogue where my are fields located, but I think that that shouldn't matter.

So I let my thoughts crossing and came to the solution to add some additional space. Something like this: JSFiddle.

So I am able to scroll down. But this is annoying in that it is useless or with other words not needed for people which do not use a device which opens a virtual keyboard. So I thought about 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 would be my question did I forget a device, which also opens a virtual keyboard and the primary question would be is there anything else except my workaround? I didn't find something to recognise the virtual keyboard explicitly.

Edit 24.04.2015:

Guys I just tested it with a Samsung Galaxy Note and the newest mobile browser versions of Firefox, Chrome as well as Opera. (Updated all three, today!)

Okay here is my result:

as you can see all browsers, except Firefox, fail and THIS is the perfect visual example of my problem. The virtual keyboard is overlapping the editable area! Usually, I prefer Chrome over any other browser, but for this case, I have to say - good work Firefox!

Rosarosabel

Are you using position: fixed or position: absolute on the elements in question? – Betti

i do not change the position explicitly so in case of that i use bootstrap it is position: relative. – Rosarosabel

Please let us know if you found any solution. – Hemoglobin

I had encountered similar issues but I have a good idea why this problem is replicated in jsfiddle as well, without your actual code it's hard to tell. If you are using overflowing content inside your body you might get this result. Usually when the virtual keyboard is open, the BODY is scrolled to input position, however overflowing content does not scroll. – Mesquite

Answer 1

...from the looks of the photos that have been posted, you must be using an overflown scrollable element with height:100% to hold the content. Am I right?

If so, this is why the virtual keyboard overlaps your content: virtual keyboards tend to push body content in order to focus on an input and not overflown elements. In this case, body content does not move, so the virtual keyboard just overlaps your content. I don't know if developers over at Mozilla spent more time on this specific issue, but looks like they did.

Edit: I answered the question without reading the comments first, and looks like I had already commented, but looks like my comment was disregarded - I wonder why, since probably I am spot on. :/

Mesquite