需要HTML5输入,在提交时滚动到带有固定导航栏的输入

Question

当我尝试提交一个缺少必填字段的表单时,我的浏览器(Chrome)会显示一条消息,提到有一个字段丢失,如果它不在我的屏幕上,则会向上滚动到它.

我的问题是我的网页上有一个50px的固定标题,结果输入字段被隐藏了,消息似乎无处不在:

代替

有没有解决的办法？

我尝试将50px的边距应用于<html>和<body>

干杯

---

编辑

这是一个问题的小提琴:http://jsfiddle.net/LL5S6/1/

Answer 1

我有完全相同的问题,并使用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);

偏移应该是标题的高度,延迟是您希望它滚动到元素所需的时间.

Answer 2

我发现的唯一方法是向无效处理程序添加"覆盖".要为表单中的每个输入实现此功能,您可以执行以下操作.

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

Answer 3

在现代浏览器中，该用例有一个新的 CSS 属性：

html {
    scroll-padding-top: 50px;
}

您的 JSFiddle 已更新：http : //jsfiddle.net/5o10ydbk/

浏览器支持scroll-padding：https : //caniuse.com/#search=scroll-padding

Answer 4

当表单中有多个无效输入时,您只想滚动到第一个:

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

Answer 5

好的，我对我在此处找到的代码段进行了肮脏的测试

因为这是别人的代码，所以我只是将其更改为滚动到缺少输入要求的元素。我不希望它有任何信誉，它甚至可能与您的想法无关，您或其他人都可以将其用作参考。

目的是获取被遗忘/错误的输入元素的ID：

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

请记住，此小提琴仅适用于您上面发布的小提琴，它无法处理多个被忘记或错误的输入字段。我只想显示一个替代方法。

-----> jSFiddle