Virtuelle Tastatur versteckt Felder/Textareas/contenteditable (versteckt unter der Tastatur)

Question

Ich weiß, es gibt bereits einige StackOverflow-Threads über das Problem, dass die virtuelle Tastatur von Mobiltelefonen Eingabefelder, Textbereiche und so weiter ausblenden oder überlappen. Aber all diese Threads waren nutzlos, ich habe viel gesucht, aber viele haben über dieses Problem gesprochen, basierend auf Android-Entwicklung und auch auf Web-Entwicklung.

Ich konzentriere mich auf Web-Entwicklung. Das Problem ist, es gibt KEIN Thread, wo das Problem gelöst wurde oder eine wirklich nützliche Antwort gegeben/gepostet wurde.

Also begann ich dieses mit der Hoffnung, dass es jetzt gelöst wird. Also, was ist das Problem direkt?

Wenn Sie auf einen Bereich klicken, auf dem auf einem mobilen Gerät etwas eingegeben werden kann, würden Sie normalerweise erwarten, dass die Website nach oben scrollt und die virtuelle Tastatur nach dem bearbeitbaren Bereich geöffnet wird. Die virtuelle Tastatur öffnet sich nur als Overlay - sie überlappt den bearbeitbaren Bereich.

In meinem Fall öffne ich einen jQuery UI-Dialog, wo meine Felder sind, aber ich denke, dass das keine Rolle spielen sollte.

Also ließ ich meine Gedanken kreuzen und kam zu der Lösung, um etwas zusätzlichen Platz hinzuzufügen. Etwas wie dieses: JSFiddle.

So kann ich nach unten scrollen. Aber das ist ärgerlich, weil es nutzlos ist oder mit anderen Worten nicht für Leute gebraucht wird, die kein Gerät benutzen, das eine virtuelle Tastatur öffnet. Also dachte ich über eine Funktion wie folgt aus:

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

Nun, für diesen Teil wäre meine Frage habe ich ein Gerät vergessen, die auch eine virtuelle Tastatur und die primäre Frage öffnet wäre ist es etwas anderes, außer meine Abhilfe ? Ich habe nicht gefunden, dass etwas die virtuelle Tastatur explizit erkennt.

bearbeiten 2015.04.24:

Jungs Getestet habe ich es nur mit einem Samsung Galaxy Note sowie die neuesten mobilen Browser-Versionen von Firefox, Chrome sowie Opera. (! Aktualisiert alle drei heute)

Okay, hier ist mein Ergebnis:

wie Sie alle Browser sehen können, außer Firefox, fehlschlagen und das ist die perfekte visuelle Beispiel für mein Problem. Die virtuelle Tastatur überlappt den bearbeitbaren Bereich! Normalerweise bevorzuge ich Chrome über jeden anderen Browser, aber für diesen Fall muss ich sagen - gute Arbeit Firefox!

Answer 1

... aus dem Aussehen der Fotos, die gepostet wurden, müssen Sie ein überflogen scrollbares Element mit height:100% verwenden, um den Inhalt zu halten. Habe ich recht?

Wenn ja, das ist, warum die virtuelle Tastatur Ihre Inhalte überlappt: virtuelle Tastaturen neigen Körperinhalt, um an einem Eingang und nicht flogenen Elemente zu konzentrieren, zu schieben. In diesem Fall bewegt sich der Inhalt nicht und die virtuelle Tastatur überlappt nur den Inhalt. Ich weiß nicht, ob Entwickler bei Mozilla mehr Zeit mit diesem speziellen Thema verbracht haben, aber wie es aussieht.

Bearbeiten: Ich beantwortete die Frage ohne die Kommentare zuerst zu lesen, und sieht aus wie ich bereits kommentiert hatte, aber sieht aus wie mein Kommentar wurde ignoriert - ich frage mich warum, denn wahrscheinlich bin ich genau richtig.:/