中心重点关注网页元素

Question

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

示例：

Image
Text
Input text
...
Footer

当您在Footer且Image至Input text不在您的查看区域内时，您现在正在按Tab键，以便焦点跳至{{ 1}}此字段现在可供您使用，但不是Input text也不是Image。

虽然在大多数情况下这种行为可能是合适的，但就我而言，它并非如此。为了防止它，我建议聚焦元素垂直居中。怎么办呢？

更清晰：

这是整个页面：

我向下滚动到底部只有＆＃34;这是页脚＆＃34;可见：

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

Answer 1

如果将带有输入的图像和文本都包装到标签中，它似乎在没有脚本的情况下工作。

<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方法更新的一种很好的方法。< / 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 ) );
};

这是一个显示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 ) );
};


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>

Answer 2

抱歉，但我不明白你为什么要垂直居中这些元素？ 您可以获得聚焦事件，并在隐藏元素时隐藏它。

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
        }
    }
}