Требуется ввод HTML5, прокрутите до ввода с фиксированной навигацией в submit

При попытке отправить форму с отсутствующими обязательными полями в моем браузере (Chrome) отображается сообщение о том, что отсутствует поле, и если оно выходит из моего экрана, оно прокручивается до него.

Моя проблема в том, что у меня есть 50px фиксированный заголовок на моей веб-странице, и в результате поле ввода скрыто, и сообщение, похоже, выходит из ниоткуда:

Вместо

Есть ли способ обойти это?

Я попробовал оба применения поля 50px к <html> и к <body>

Приветствия

ИЗМЕНИТЬ

Вот сценарий проблемы: http://jsfiddle.net/LL5S6/1/

Ответ 1

Единственный способ, которым я нашел, - добавить "переопределение" к недействительному обработчику. Чтобы реализовать это для каждого входа в вашей форме, вы можете сделать что-то вроде этого.

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

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

Для этого требуется HTML5, и это протестировано в IE11, Chrome и Firefox.
Кредиты @HenryW для поиска, что scrollIntoView работает, как ожидалось.

Обратите внимание, что параметр false для scrollIntoView выравнивает вход с нижней, поэтому, если у вас большая форма, он может быть выровнен с нижней частью страницы.

jsfiddle

Ответ 2

У меня была одна и та же проблема и разрешила ее с помощью jquery с этим битом кода:

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

Смещение должно быть высотой вашего заголовка, а время задержки - это время, которое вы хотите выполнить, чтобы перейти к элементу.

Ответ 3

Если в форме имеется несколько недопустимых входов, вы можете просто перейти к первому из них:

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

Ответ 4

ok, я сделал грязный тест с фрагментом кода, который я нашел здесь в SO

Поскольку это код от кого-то другого, я просто изменяю его, чтобы прокрутить элемент, у которого было отсутствующее требование ввода. Я не хочу за него признавать, и, возможно, это даже не то, что вы имеете в виду, вы или кто-то другой могли бы использовать его в качестве ссылки.

Целью было получить идентификатор забытого/неправильного элемента ввода:

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

Пожалуйста, имейте в виду, что эта скрипка работает только для вашей выложенной скрипки выше, она не обрабатывает несколько забытых или неправильных полей ввода. Я только хотел показать альтернативу.

----- > jSFiddle

Ответ 5

Два решения:

Один: примените прокладку к телу →
```
body {
 padding-top:50px;
}
```
Два: примените поле к основному контейнеру →
```
 #content {
   margin-top:50px;
 }
```