在页面上创建弹出窗口时，主页和结束键不起作用？

Question

如果你看一下this page，你会在容器中看到一堆产品。如果您单击其中一个产品，将打开一个弹出窗口（很可能）将具有比浏览器窗口更高的高度，因此将显示滚动条。

打开弹出窗口后，Home和End键不会在按下时滚动元素。但是，如果单击弹出窗口，则键可以正常工作。

打开后我尝试在弹出窗口中调用.focus()和.click()，但在我用鼠标单击弹出窗口之前，Home和End键仍然没有任何效果。< / p>

为什么Home和End键不会在按下时滚动元素，如何让它们工作？

Answer 1

除非元素是可聚焦的，否则

focus()实际上不会将键盘焦点放在元素上。 input和textarea等互动元素是可调焦的，但默认情况下div不是。但是，您可以通过设置tabIndex property（或tabindex attribute）来使其变得可关注。

当我加载您的页面并在控制台中输入以下内容时：

$(".productPopupContainer").prop("tabIndex", "-1");
$(".productPopupContainer").focus();

即使我没有在弹出窗口中点击，Home和End键也会开始工作。 （我在Mac上使用最新版本的Chrome，顺便说一下。）

jQuery documentation page for focus()很好地解释了它的工作原理。

有趣的事实：如果您没有在元素上设置tabIndex但是读取该属性，那么您将获得-1：

var elem = document.getElementById("#anything");
console.log(elem.tabIndex); // prints -1

但是在浏览器内部，实际上没有定义该值，因为显式地将其设置为-1使得它可以在以前不可调焦。这意味着您实际上可以执行此操作以使元素可聚焦而不会影响其Tab键顺序：

elem.tabIndex = elem.tabIndex;