Прокрутка к обязательному полю
Всем привет.
Есть форма с обязательными полями - кастомной валидации нет - только по required браузерная. Стандартное поведение браузера - при попытке отправить форму браузер прокручивает к первому полю которое не заполнено - но получается так что отступ поля от верха страницы слишком маленький - это поле закрывается фиксированным меню. Можно ли как то увеличить этот оступ не делая свою кастомную валидацию? К примеру что бы первое пустое поле прокручивалось на средину страницы а не в самый верх |
<header></header>
<form>
<div style="height: 500px"></div>
<input type="text" required/>
<div style="height: 3000px"></div>
<input type="submit"/>
</form>
<style>
body {
padding-top: 50px;
}
header {
height: 50px;
background: red;
position: fixed;
top: 0;
left: 0;
width: 100%;
opacity: 0.5
}
</style>
<script>
document.querySelector('form [type="submit"]').addEventListener('click', function () {
const OFFSET_TOP = 25;
const form = this.closest('form');
const invalidField = [].filter.call(form.querySelectorAll('[required]'), function (field) {
return !field.value;
}).shift();
if (!invalidField) {
return;
}
const headerHeight = document.querySelector('header').offsetHeight;
window.scrollTo(0, invalidField.getBoundingClientRect().top + document.body.scrollTop - headerHeight - OFFSET_TOP);
});
</script>
|
Nexus,
Я хотел уточнить куда копать, а вы даже код дали. Огромное спасибо!. Чет и не подумал сразу что можно на клик и свой скрол сделать. )) |
Цитата:
|
Bond, это не готовое решение, а его пример.
Обратите внимание на замечание laimas: Цитата:
|
Цитата:
|
Nexus,
const invalidField = form.querySelector(':invalid');
|
Цитата:
рони, спасибо, я почему-то считал, что у этого селектора недостаточная поддержка браузерами. |
| Часовой пояс GMT +3, время: 09:56. |