主页键和结束键don'在页面上创建弹出窗口时无法工作

Home and End keys don't work when popup created on page?

本文关键字：创建 窗口 工作 don 结束 主页      更新时间：2024-05-29

如果你看一下这个页面，你会看到容器中的一堆产品。如果你点击其中一个产品，就会打开一个弹出窗口，它（很可能）的高度比浏览器窗口的高度大，因此会显示一个滚动条。

弹出窗口打开后，Home和End键在按下时不会使元素滚动。但是，如果您在弹出窗口中单击，则按键有效。

我试着在打开弹出窗口后调用.focus()和.click()，但Home和End键仍然没有任何效果，直到我用鼠标点击弹出窗口。

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

focus()实际上不会为元素提供键盘焦点，除非该元素是可聚焦的。像input和textarea这样的交互元素是可聚焦的，但默认情况下div不是。但是，可以通过设置其tabIndex属性（或tabindex属性）使其可聚焦。

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

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

主页和结束键开始工作，即使我还没有点击弹出窗口。（顺便说一句，我在Mac上使用的是最新版本的Chrome浏览器）。

focus（）的jQuery文档页面对其工作原理有很好的解释。

FUN FACT：如果您不在元素上设置tabIndex，而是读取该属性，则会得到-1:

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

但在浏览器内部，该值实际上没有定义，因为显式地将其设置为-1会使其可聚焦，而以前没有。这意味着你实际上可以这样做，在不影响标签顺序的情况下使元素可聚焦：

elem.tabIndex = elem.tabIndex;
相关文章：