javascript - HTML5 input required, scroll to input with fixed navbar on submit

Question

Welcome To Ask or Share your Answers For Others

javascript - HTML5 input required, scroll to input with fixed navbar on submit

asked Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

When trying to submit a form with missing required fields, my browser (Chrome), displays a message mentionning there is a field missing, and if it's out of my screen, it scrolls up to it.

My problem is that I have a 50px fixed header in my webpage, and as a result, the input field is hidden, and the message seems to come out of nowhere:

Input field hidden

Instead of

Input field shown

Is there a way around this?

I tried both applying the 50px margin to <html> and to <body>

Cheers

EDIT

Here's a fiddle of the problem: http://jsfiddle.net/LL5S6/1/

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

288 views

1 Answer

深蓝 · Answer 1 · 2021-10-23T17:46:38+0000

I had the exact same problem and resolved it using jquery with this bit of code:

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

Offset should be the height of your header and delay is how long you want it to take to scroll to the element.

Categories

javascript - HTML5 input required, scroll to input with fixed navbar on submit

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags