垂直居中网页元素

Question

将焦点更改到不在您的查看区域中的网站的另一个元素（例如，通过按 TAB 键到另一个输入字段）时（例如，您在页面底部，新元素在顶部）所有浏览器（在 Windows 操作系统上测试过的 Internet Explorer、Firefox、Chrome）似乎都可以滚动，以使具有新焦点的元素可见。

例子：

Image
Text
Input text
...
Footer

当您位于Footer 和Image 时，Input text 不在您的查看区域内并且您现在正在按 Tab，因此焦点会跳转到 Input text，此字段现在对您可见但不可见Image 也不是 Text。

虽然这种行为在大多数情况下可能是合适的，但在我的情况下却不是。为了防止这种情况，我建议将焦点元素垂直居中。如何做到这一点？

为了更清楚：

这是整个页面：

我正在向下滚动到底部，所以只有“这是页脚”可见：

我现在通过按 Tab 键来改变焦点。焦点跳转到文本输入。不幸的是，此文本字段上方的元素不可见：

Answer 1

抱歉，我不明白您为什么要将元素垂直居中？ 当焦点元素被隐藏时，您可以获得焦点事件并阻止它。

var items = $(document).getElementsByTagName("*");
for (var i = items.length; i--;) {
    $(this).focus(function() {
        if ($(this).attr('id') == 'ID FOR THE HIDDEN ELEMENT') {
            // Disabled focus or pass focus to next element
            $(this).blur(); // Disabled
        }
    }
}

Answer 2

如果将图像和文本与输入一起包装到一个标签中，它似乎可以在没有脚本的情况下工作。

<label for="input1">
  <img src="http://placehold.it/350x50"><br>
  Some text that should be visible
  <input id="input1" type="text">
</label>
<br>
<br>
<br>
<label for="input2">
  <img src="http://placehold.it/350x50"><br>
  Some text that should be visible
  <input id="input2" type="text">
</label>
<br>
<br>
<br>
<label for="input3">
  <img src="http://placehold.it/350x50"><br>
  Some text that should be visible
  <input id="input3" type="text">
</label>
<br>
<br>
<br>
<label for="input4">
  <img src="http://placehold.it/350x50"><br>
  Some text that should be visible
  <input id="input4" type="text">
</label>
<br>

如果您不能使用标签，我建议您添加一个事件处理程序，在其中捕获“tab 键”，获取具有焦点的元素并获取其父元素（可能包含您的输入以及文本和图像）并将该父级滚动到视图中

document.activeElement.parentNode.scrollIntoView();

或者你需要计算document.activeElement的位置并将其滚动到中心，这是ThinkingStiff制作的一个很好的方法，我用scrollIntoViewCenter方法更新了。

Element.prototype.documentOffsetTop = function () {
    return this.offsetTop + ( this.offsetParent ? this.offsetParent.documentOffsetTop() : 0 );
};
Element.prototype.scrollIntoViewCenter = function () {
  window.scrollTo( 0, this.documentOffsetTop() - (window.innerHeight / 2 ) );
};

这是一个显示scrollIntoViewCenter 方法的sn-p。

Element.prototype.documentOffsetTop = function () {
  return this.offsetTop + ( this.offsetParent ? this.offsetParent.documentOffsetTop() : 0 );
};

Element.prototype.scrollIntoViewCenter = function () {
  window.scrollTo( 0, this.documentOffsetTop() - (window.innerHeight / 2 ) );
};


window.addEventListener("keyup", myScript);


function myScript(e) {
  if ('9' == e.keyCode) {  // tab = 9
    //find and vertically center focused input
    document.activeElement.scrollIntoViewCenter();
  }
}

<img src="http://placehold.it/350x50"><br>
Some text that should be visible
<input id="input1" type="text">
<br>
<br>
<br>

<img src="http://placehold.it/350x50"><br>
Some text that should be visible
<input id="input2" type="text">
<br>
<br>
<br>

<img src="http://placehold.it/350x50"><br>
Some text that should be visible
<input id="input3" type="text">
<br>
<br>
<br>

<img src="http://placehold.it/350x50"><br>
Some text that should be visible
<input id="input4" type="text">
<br>
<br>
<br>

<img src="http://placehold.it/350x50"><br>
Some text that should be visible
<input id="input5" type="text">
<br>
<br>
<br>

<img src="http://placehold.it/350x50"><br>
Some text that should be visible
<input id="input6" type="text">
<br>
<br>
<br>