Eingang auf Fokus oder die tab-Taste gedrückt, bewegen Sie sich zu der Mitte des Bildschirms

Ich habe eine Reihe von Formularfeldern über die Falte. Beim drücken der "tab" - Taste, um Schritt durch die einzelnen Eingabe - /Auswahlfeld sitzt Sie im nächsten Feld auf der Seite unten Falten.

Einige meiner Felder haben, tool tips, validation-Antworten und auto-suggest-Boxen, die erscheinen unter dem Feld. Bei der Navigation mit der Tabulatortaste auf das Feld, das Sie nicht sehen können diese Elemente unterhalb der Falte.

Gibt es eine javascript bzw. jQuery-Skript, das können vertikal zentriert den screen um einen fokussierten input/textarea/select-Taste/Feld statt Anpassung an den Boden?

  • Ich weiß nicht, über andere, aber eine position auf dem Bildschirm ändern, jedes mal, wenn ich den Fokus ändern würde mich verrückt. Ich würde es vorziehen, eine Lösung, die Schriftrollen der offset nur, wenn man die Elemente nicht vollständig im viewport.
  • So sieht meine Antwort für Sie arbeiten? Bitte geben Sie einen Kommentar, wenn/warum nicht befriedigend für dein problem
  • Ich bin damit einverstanden, dass dies ist eine Besondere Aktion und würde nur sparsam verwendet werden, als wäre es ärgerlich. Nur versuchen zu denken, der eine passende Lösung - vielleicht nur-Zentrum das Feld beim "tabben" nicht auf den Fokus oder vielleicht schieben Sie animieren, scrollen. Ansonsten, was sind einige andere Möglichkeiten, um den Fokus input gepolsterte von der Seite Falten?
InformationsquelleAutor Peter Craig | 2009-12-03
  1. 14

    Können Sie einfach binden Sie das focus-Ereignis und berechnen Sie dann den offset des Feldes und zentrieren Sie es auf dem Bildschirm.

    $(':input').focus(function(){
    var center = $(window).height()/2;
    var top = $(this).offset().top ;
    if (top > center){
        $(window).scrollTop(top-center);
    }
});
    • Ich denke, das ist die einfachste Lösung für meine Frage, aber wie kommentierte, die Aktion ist nicht standard und könnte eine lästige Aktion, die in den meisten Fällen - die Frage muss etwas neu definiert, um eine praktische Verwendung für diese Lösung.
    • Mache ich ein paar Prüfungen, bekommt er die Werte richtig, aber Fenster oder document scrollTop() will nicht, um ball zu spielen... ich habe dies geändert, um die div-id (#div).scrollTop, die fast macht es aber nicht so konsequent wie ich erwarten würde, des Körpers oder der Fenster.
    • Es gibt manchmal Probleme mit Firefox und/oder Chrome. Sie können versuchen $('html, body').animate({scrollTop: top - center}, 300);, Das funktioniert für mich
    • danke , hat bei mir perfekt
    • $(window).height() hat nicht funktioniert für mich, wie es war-computing die Länge der gesamten website-Inhalt statt der Fenster. Ich verwendet $(window).outerHeight() statt. Mit Hilfe von jQuery version 3.2.1
    InformationsquelleAutor PetersenDidIt
  2. 1

    Einfachste Sache wäre, die jQuery ScrollTo-plugin und die jQuery Viewport plugin.

    Dann wickeln Sie jeden Eingang + verbundene Elemente (Validierung, Rückmeldung, ....) in einem div.

    Im Fokus überprüfen Sie, ob das div-Element vollständig sichtbar, wenn Sie nicht verwenden scrollTo. Getan.

    Natürlich ist das ein bisschen aufblasen, aber wenn Sie Leben können mit den 2 weiteren Abhängigkeiten und eine zusätzliche ~4kb das funktionieren sollte, ohne dabei die Berechnungen selbst.

    InformationsquelleAutor jitter
  3. 1

    Gleiche von oben mit smooth scroll Effekt

     $(':input').focus(function () {
         var center = $(window).height() / 2;
         var top = $(this).offset().top;
         if (top > center) {
             $('html, body').animate({ scrollTop: top - center }, 'fast');            
         }
     });
    • Super!!! Dank dude.
    InformationsquelleAutor Arun Prasad E S
Schreibe einen Kommentar