webentwicklung-frage-antwort-db.com.de

HTML5-Eingabe erforderlich, scrollen Sie zur Eingabe mit fester Navigationsleiste beim Senden

Wenn Sie versuchen, ein Formular mit fehlenden erforderlichen Feldern zu senden, zeigt mein Browser (Chrome) eine Meldung an, in der ein Feld fehlt, und wenn es sich außerhalb meines Bildschirms befindet, wird es nach oben verschoben.

Mein Problem ist, dass ich einen festen Header von 50px auf meiner Webseite habe. Das Eingabefeld ist daher ausgeblendet, und die Nachricht scheint aus dem Nichts zu kommen:

Input field hidden

Anstatt

Input field shown

Gibt es da einen Weg? 

Ich habe beide versucht, den 50px-Rand auf <html> und auf <body> anzuwenden.

Prost


BEARBEITEN

Hier ist eine Geige des Problems: http://jsfiddle.net/LL5S6/1/

41

Die einzige Möglichkeit, die ich gefunden habe, ist das Hinzufügen eines 'override' zum ungültigen Handler. Um dies für jede Eingabe in Ihrem Formular zu implementieren, können Sie so etwas tun.

var elements = document.querySelectorAll('input,select,textarea');
var invalidListener = function(){ this.scrollIntoView(false); };

for(var i = elements.length; i--;)
    elements[i].addEventListener('invalid', invalidListener);

Dies erfordert HTML5 und wird auf IE11, Chrome und Firefox getestet.
Dank an @HenryW für die Feststellung, dass scrollIntoView wie erwartet funktioniert.

Beachten Sie, dass der Parameter false für scrollIntoView die Eingabe am unteren Rand ausrichtet. Wenn Sie ein großes Formular haben, wird es möglicherweise am unteren Rand der Seite ausgerichtet.

jsfiddle

22
A1rPun

Ich hatte genau das gleiche Problem und löste es mit jquery mit diesem Code:

var delay = 0;
var offset = 150;

document.addEventListener('invalid', function(e){
   $(e.target).addClass("invalid");
   $('html, body').animate({scrollTop: $($(".invalid")[0]).offset().top - offset }, delay);
}, true);
document.addEventListener('change', function(e){
   $(e.target).removeClass("invalid")
}, true);

Der Versatz sollte die Höhe der Kopfzeile sein, und delay gibt an, wie lange es dauern soll, bis zum Element geblättert wird.

37
T.J. Moats

Wenn das Formular mehrere ungültige Eingaben enthält, möchten Sie nur zum ersten Bild scrollen:

var form = $('#your-form')
var navbar = $('#your-fixed-navbar')

// listen for `invalid` events on all form inputs
form.find(':input').on('invalid', function (event) {
    var input = $(this)

    // the first invalid element in the form
    var first = form.find(':invalid').first()

    // only handle if this is the first invalid input
    if (input[0] === first[0]) {
        // height of the nav bar plus some padding
        var navbarHeight = navbar.height() + 50

        // the position to scroll to (accounting for the navbar)
        var elementOffset = input.offset().top - navbarHeight

        // the current scroll position (accounting for the navbar)
        var pageOffset = window.pageYOffset - navbarHeight

        // don't scroll if the element is already in view
        if (elementOffset > pageOffset && elementOffset < pageOffset + window.innerHeight) {
            return true
        }

        // note: avoid using animate, as it prevents the validation message displaying correctly
        $('html,body').scrollTop(elementOffset)
    }
})

JSFiddle

9
Alf Eaton

ok, ich habe einen Dirty-Test mit einem Code-Snippet gemacht, den ich hier auf SO gefunden habe

Da es sich um einen Code von jemand anderem handelt, ändere ich ihn einfach, um zu dem Element zu scrollen, für das keine Eingabe erforderlich war. Ich möchte keine Anerkennung dafür, und es ist vielleicht nicht einmal das, was Sie im Sinn haben, Sie oder jemand anderes könnten es als Referenz verwenden.

Das Ziel war es, die ID des vergessenen/falschen Eingabeelements zu ermitteln:

            var myelement = input.id;
            var el = document.getElementById(myelement);
            el.scrollIntoView(false);

Bitte beachten Sie, dass diese Geige nur für die oben angegebene Geige funktioniert, nicht für mehrere vergessene oder falsche Eingabefelder. Ich wollte nur eine Alternative anzeigen. =

-----> jSFiddle

5
HenryW

Sie können das oninvalid -Ereignisattribut von HTML5 verwenden und in den Tag Ihres Skripts eine Funktion zum Umleiten schreiben.

Hier ist das Beispiel:

<input type="text" required oninvalid="scroll_to_validator(this)">

<script>
    function scroll_to_validator(input)
        {
        input.focus(); 
        }
</script>

Wenn Sie auf die Schaltfläche zum Senden klicken, wird ein Bild in das ungültige Feld verschoben.

Fügen Sie für Radioknöpfe nur ein Radio mit demselben Namen hinzu
Hier ist das Beispiel (jsfiddle)

1
Abhilash Sharma

Ich habe versucht, den Weg von T.J. Moats, aber es funktionierte nicht wie nötig, weil ich oft auf das Feld zurückkam, was zuerst falsch war.

Also habe ich es geschafft:

var navhei = $('header').height();
var navheix = navhei + 30;
document.addEventListener('invalid', function(e){
$(e.target).addClass("invalid");
   $('html, body').animate({scrollTop: $($(".invalid")[0]).offset().top - navheix }, 0);
 
setTimeout(function() {
$('.invalid').removeClass('invalid');
},0300);
}, true);
body {
    margin: 0;
    margin-top: 50px;
    text-align: center;
}

header {
    position: fixed;
    width: 100%;
    height: 50px;
    background-color: #CCCCCC;
    text-align:center;
    top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<header>This is the header</header>
<div>
<form action="">
<br>
    <input id="text" type="text" required="required" /><br><br>
    <input id="text" type="text" required="required" /><br><br><br><br>
    <input id="text" type="text" required="required" /><br><br>
    <input id="text" type="text" required="required" /><br><br><br><br>
    <input id="text" type="text" required="required" /><br><br><br><br><br><br>
    <input id="text" type="text" required="required" /><br><br>
        <p>Click send (at the bottom of the page), without filling the input field.</p><br><br><br><br><br><br>
        <input id="text" type="text" required="required" /><br><br>
    <input type="submit" id="btnSubmit" />
    </form>
</div>

Ich hoffe es wird für die Leute hilfreich sein :)

0
kibus90

Zwei Lösungen:

  • Erstens: Polsterung auf den Körper auftragen ->

    body {
     padding-top:50px;
    }
    
  • Zweitens: Rand auf den Hauptcontainer anwenden ->

     #content {
       margin-top:50px;
     }
    
0
DaniP