Посмотрите эту страницу.
У меня есть страница с более низким "плавающей" фиксированной позицией div, которая покрывает некоторую часть нижней части экрана экрана, с высоким индексом z и множеством полей ввода.
Проблема заключается в том, что когда одно из нижних полей ввода сфокусировано, нажимая TAB, их содержимое частично скрывается div. Я хотел бы определить, когда сфокусированы нижние поля ввода, и прокрутите страницу вниз "достаточно", чтобы довести их до видимого места.
Есть ли чистый способ сделать это?
Изменить: мое решение работает, за исключением масштабирования браузера. Попробуйте его, например, на 144%. Любые идеи о том, как исправить?
Вот решение моего друга.
Кажется, хорошо работает в браузерах.
Все еще есть одно незначительное раздражение, что элемент имеет большую границу при выборе, а часть этого увеличенного края остается скрытой. Я всегда мог добавить лишний пиксель или два в свиток, но я уверен, что должно быть более элегантное решение.
Решение Ripper234 хорошо работало для меня. Следующее решение для тех, чье поле покрывается элементом выше него (например, фиксированным навигатором), а не ниже него.
Я также анимировал его с помощью jQuery и добавил переменную дополнений, которая полезна, если у вас есть метка над полем, которое вы хотите показать, или хотите центрировать поле (просто установите отступ на половину высоты экрана).
var navHeight = 200;
var padding = 25;
$('input').on('focus', function() {
try {
var elemTop = $(this).offset().top;
var maxVisible = $(document).scrollTop() + navHeight;
if (elemTop < maxVisible) {
$("html, body").animate({ scrollTop: elemTop - navHeight - padding }, 250);
}
} catch (e) {
console.log("Error: " + e);
}
});
Что делать, если вы добавляете обработчик onfocus в каждое текстовое поле и проверяете, слишком ли оно расположено или находится близко к элементу "снизу", и когда вы соответствующим образом меняете положение этого элемента div (переместите его вниз/вверх).
Я бы просто использовал Z-index, чтобы поместить сфокусированный вход над фиксированным div
Я не думаю, что есть общий способ переноса экрана вниз, возможно, я ошибаюсь.
возможно, вы можете сделать это с в странице ссылок, как это, поскольку они предназначены, чтобы вытащить экран вниз, использовать JQuery, чтобы сказать "когда этот вход находится в фокусе перейти к соответствующей точке привязки"
<a href="#box5"><input type="text" /></a>
element.scrollIntoView();
поддерживается во всех браузерах мэров, т.е. -6-7-8-9-10 firefox, webkit
или
element.focus(); element.blur();