gpt4 book ai didi

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

转载 作者:IT王子 更新时间:2023-10-29 03:02:33 24 4
gpt4 key购买 nike

当尝试提交缺少必填字段的表单时,我的浏览器 (Chrome) 会显示一条消息,提示缺少一个字段,如果它超出了我的屏幕,它会向上滚动到它。

我的问题是我的网页中有一个 50px 的固定标题,结果输入字段被隐藏,消息似乎不知从何而来:

Input field hidden

代替

Input field shown

有解决办法吗?

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

干杯


编辑

这是问题的一个 fiddle :http://jsfiddle.net/LL5S6/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);

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

关于javascript - 需要 HTML5 输入,在提交时滚动到带有固定导航栏的输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19814673/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com