Question

当我尝试提交缺少必填字段的表单时，我的浏览器（Chrome）会显示一条消息，提示缺少某个字段，如果它不在我的屏幕上，则向上滚动到它。

我的问题是我的网页上有一个50px的固定标题，因此输入字段被隐藏了，而且消息似乎无处不在：

Input field hidden

而不是

Input field shown

有解决方法吗？

我尝试将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的效果与预期一致。

请注意，scrollIntoView的false参数会将输入与底部对齐，因此如果您有大型表单，则可能会与页面底部对齐。

jsfiddle

Answer 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

Answer 4

在modern browsers中，该用例有一个新的CSS属性：

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

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

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

Answer 5

好吧，我用a code snippet i found here on SO

进行了一次肮脏的测试

由于它是来自其他人的代码，我只是改变它以滚动到缺少输入要求的元素。我不想要任何功劳，它可能甚至不是你想到的，你或其他人可以用它作为参考。

目标是获取遗忘/错误输入元素的id：

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

请记住，这个小提琴仅适用于您上面发布的小提琴，它不会处理多个遗忘或错误的输入字段。我只想展示另一种选择。

----->jSFiddle

Answer 6

您可以使用HTML5的oninvalid事件属性，并在脚本的代码中编写用于重定向它的函数。

这里是示例：

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

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

然后点击提交按钮，它将滚动到无效字段。

对于单选按钮，请仅在一个同名无线电上添加
Here is the example (jsfiddle)

Answer 7

两种解决方案：

一个：对身体应用填充 - ＆gt;
```
body {
 padding-top:50px;
}
```
二：对主容器应用保证金 - ＆gt;
```
 #content {
   margin-top:50px;
 }
```

Answer 8

我试图用T.J.护城河，但是没有按要求工作，因为我经常回到田野，首先是不正确的。

所以，我做到了：

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>

我希望它将对人们有所帮助：）

Answer 9

这是一种轻松而快速的方式。

$('input').on('invalid', function(e) {
        setTimeout(function(){
            $('html, body').animate({scrollTop: document.documentElement.scrollTop - 150 }, 0);
        }, 0);
});

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

9 个答案:

jsfiddle