Javascript 垂直居中聚焦网页元素

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

例如：

Image
Text
Input text
...
Footer

当您在

页脚

和

图像

到

输入文本

不在您的查看区域内，并且您现在按tab键，因此焦点跳到

输入文本

时，您现在可以看到此字段，但不能看到

图像

或

文本

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

更清楚地说：

这是整个页面：

我向下滚动到底部，因此只有“这是页脚”可见：

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

---

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

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

---

如果将输入的图像和文本都包装到标签中，则它似乎在不使用脚本的情况下工作

一些应该可见的文本








一些应该可见的文本








一些应该可见的文本








一些应该可见的文本

理论上的答案（没有完整功能的javascript）可以吗？@LGSon我至少需要有人给我指出正确的方向。我知道如何称呼这个问题，所以我无法搜索解决方案。@Drako：我不想完全阻止更改，但新的聚焦元素应该垂直居中（它位于屏幕的中心，因此上面的元素也可见）。好的，在我的新注释中，尝试更改样式：$（this）.css的“禁用”（'margin-left'，'50%'），有效吗？如果您有ID，则获取元素并更改样式：$（'#ID'）.css（'margin-left'，'50%'））；我更新了我的问题，以更清楚地说明我试图实现的目标。这是正确的方向。没有JavaScript，这可能吗？您是否尝试过将所有图像、文本和输入包装在一个标签中，该标签的

for

属性设置为输入的id？…这可能会实现。如果您可以（但不明白我的意思），发布你的html，我可以制作一个片段给你看。@mosquito87我用了一些似乎不需要脚本就可以工作的东西更新了我的答案。html是由一个框架在服务器端创建的。所以我不能直接影响html。我正在测试你的建议。谢谢。框架似乎只提供了创建带有文本的标签的功能用一个标签创建HTML元素。但是标签不能充当容器。我正在尝试你的JS。