当尝试提交缺少必填字段的表单时，我的浏览器 (Chrome) 会显示一条消息，提示缺少一个字段，如果它不在我的屏幕上，它会向上滚动。
我的问题是我的网页中有一个 50px 的固定标题，因此，输入字段被隐藏了，并且消息似乎无处不在：
代替
有没有解决的办法？
我尝试将 50px 边距应用于<html>和<body>
干杯
编辑
这是一个问题：http: //jsfiddle.net/LL5S6/1/
问问题
25429 次
9 回答
41
我遇到了完全相同的问题，并使用 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);
偏移量应该是标题的高度，延迟是您希望滚动到元素所需的时间。
于 2015-05-14T21:49:32.983 回答
26
我发现的唯一方法是向无效处理程序添加“覆盖”。要为表单中的每个输入实现此功能，您可以执行以下操作。
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
于 2014-09-17T09:41:09.727 回答
15
在现代浏览器中，该用例有一个新的 CSS 属性：
html {
scroll-padding-top: 50px;
}
您的 JSFiddle 已更新：http: //jsfiddle.net/5o10ydbk/
浏览器支持scroll-padding：https ://caniuse.com/#search=scroll-padding
于 2020-05-20T12:49:43.523 回答
9
当表单中有多个无效输入时，您只想滚动到其中的第一个：
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)
}
})
于 2016-02-10T12:38:11.403 回答
5
由于它是来自其他人的代码，我只是将其更改为滚动到缺少输入要求的元素。我不想要它的任何功劳，它甚至可能不是您的想法，您或其他人可以将其用作参考。
目标是获取忘记/错误输入元素的 id：
var myelement = input.id;
var el = document.getElementById(myelement);
el.scrollIntoView(false);
请记住，这个小提琴只适用于您在上面发布的小提琴，它不能处理多个忘记或错误的输入字段。我只想展示一个替代方案。
于 2014-09-17T09:28:54.180 回答
1
我尝试使用TJ Moats的方式，但它没有按需要起作用，因为我经常回到外地，首先是不正确的。
所以，我做到了：
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>我希望它对人们有帮助:)
于 2018-08-26T17:37:14.173 回答
1
您可以使用oninvalidHTML5 的 event 属性并在脚本的标签中编写一个函数来重定向它。
这是示例：
<input type="text" required oninvalid="scroll_to_validator(this)">
<script>
function scroll_to_validator(input)
{
input.focus();
}
</script>
单击提交按钮后，它将滚动到无效字段。
对于单选按钮，请仅在一个具有相同名称的收音机上添加
这是示例（jsfiddle）
于 2018-10-31T13:22:35.337 回答
0
两种解决方案：
一：对body应用padding -->
body { padding-top:50px; }二：对主容器应用边距-->
#content { margin-top:50px; }
于 2013-11-06T14:38:13.607 回答
-1
这是一种简单快捷的方法。
$('input').on('invalid', function(e) {
setTimeout(function(){
$('html, body').animate({scrollTop: document.documentElement.scrollTop - 150 }, 0);
}, 0);
});
于 2018-06-05T15:29:54.820 回答