wake-up-neo.net

Android rollt beim Eingabefokus nicht richtig, wenn kein Körperelement vorhanden ist

Wenn ein mobiler Browser eine Tastatur aufruft, versucht er, die Bildlaufleisten so zu verschieben, dass die Eingabe immer noch sichtbar ist.

Bei iOS Safari scheint dies richtig zu sein, indem das übergeordnete nächste - Bildlauf gesucht wird.

Bei einem Android-basierten oder Chrome-Browser scheint es, das Body-Element einfach auszuprobieren und dann aufzugeben, sodass die fokussierte Eingabe unter der Tastatur verborgen ist.

 Wie man es zerbricht

Legen Sie overflow-y: hidden für das body-Element fest. Erstellen Sie einen scrollbaren Container und fügen Sie dort ein Formular ein.

Wenn Sie ein Element am unteren Rand Ihres Bildschirms auswählen, wird dieses durch die Tastatur verdeckt.

Demo

http://dominictobias.com/Android-scroll-bug/

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>Android scroll/focus bug</title>
    <style>
    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
    }
    .scroll {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow-y: scroll;
    }
    input {
        margin-bottom: 20px;
        width: 100%;
    }
    </style>
</head>
<body>

    <div class="scroll">
        <input type="text" value="Input 1">
        <input type="text" value="Input 2">
        <input type="text" value="Input 3">
        <input type="text" value="Input 4">
        <input type="text" value="Input 5">
        <input type="text" value="Input 6">
        <input type="text" value="Input 7">
        <input type="text" value="Input 8">
        <input type="text" value="Input 9">
        <input type="text" value="Input 10">
        <input type="text" value="Input 11">
        <input type="text" value="Input 12">
        <input type="text" value="Input 13">
        <input type="text" value="Input 14">
        <input type="text" value="Input 15">
        <input type="text" value="Input 16">
        <input type="text" value="Input 17">
        <input type="text" value="Input 18">
        <input type="text" value="Input 19">
        <input type="text" value="Input 20">
    </div>

</body>
</html>

Irgendwelche Ideen, wie man das beheben kann? Benötigt es einige Browsererkennung und unordentliche Hacks?

androidgoogle-chromeinputscrollfocus
13
Dominic

Dies ist ein Fehler im Android-Browser. Die Eingabe wird übrigens in die Ansicht gescrollt, nachdem ein Zeichen auf der Soft-Tastatur eingegeben wurde.

Das folgende Code-Snippet, das irgendwo auf der Seite platziert wird, sollte helfen:

if(/Android 4\.[0-3]/.test(navigator.appVersion)){
   window.addEventListener("resize", function(){
      if(document.activeElement.tagName=="INPUT"){
         window.setTimeout(function(){
            document.activeElement.scrollIntoViewIfNeeded();
         },0);
      }
   })
}
45
Serge

Die Antwort von Serge ist großartig, aber ich hatte ein paar Modifikationen, die mich verbessert haben. 

Das Problem erschien auch auf Android 6 für mich, also habe ich es zum Check hinzugefügt und brauchte die Korrektur, um sowohl für Textareas als auch für Eingaben zu arbeiten.

if(/Android [4-6]/.test(navigator.appVersion)) {
   window.addEventListener("resize", function() {
      if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {
         window.setTimeout(function() {
            document.activeElement.scrollIntoViewIfNeeded();
         },0);
      }
   })
}

Wenn jemand das Update in Angular 1 benötigt, ist hier das, was ich dort verwendet habe.

angular.module('<module name>').run(function ($window, $timeout) {
    if(/Android [4-6]/.test($window.navigator.appVersion)){
        $window.addEventListener("resize", function(){
            if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA"){
                $timeout(function() {
                    document.activeElement.scrollIntoViewIfNeeded();
                });
            }
        });
    }
});
9
Zack Huston

Eine kleine Überarbeitung bietet, wenn es jemandem etwas Zeit spart:

  • Sie müssen keine Android-Version angeben (weniger wahrscheinlich, wenn Ihr Benutzer Android 7.0 oder höher erhält).
  • Es ist nicht notwendig, setTimeOut einzubinden

  • MDN rät von .scrollIntoViewIfNeeded bc der Browser-Inkompatibilität ab => .scrollIntoView ist ein funktionsfähiger Ersatz mit etwas mehr Browserkompatibilität

    if(/Android/.test(navigator.appVersion)) {
   window.addEventListener("resize", function() {
     if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {
       document.activeElement.scrollIntoView();
     }
  })
}
1
Derek Mueller

Etwas anders betrachtet scheint der Fehler durch die Suggestions-Funktion des Browsers verursacht zu sein. Da ich die Vorschläge sowieso nicht wirklich will, habe ich verwendet:

if(/Android/.test(navigator.appVersion)){
  $('input[type="text"]').attr('autocomplete', "off");
}

was eine viel glattere Erfahrung gibt.

0
Ben Trewern