在页面加载时将焦点设置在滚动框上

Set focus on scrollbox on pageload

本文关键字：设置 滚动 焦点 加载      更新时间：2023-09-26

我有一个类似于的滚动框

http://www.quackit.com/html/codes/html_scroll_box.cfm

现在，您必须在页面加载后单击它内部，才能使用箭头键上下移动。我希望它在页面加载时，焦点已经在里面了，所以你不必点击里面就可以使用箭头键。有办法做到这一点吗？

谢谢！

div是不可聚焦的元素，因此聚焦函数可能无法工作，请将tabindex属性添加到div以使聚焦函数正常工作。

<div id="yourDivID" tabindex="-1"></div

根据给tabindex的值，它的行为会有所不同：

  • 0将允许您使用键盘箭头和制表键聚焦元素
  • -1将禁用选项卡，但它仍然可以聚焦
  • 任何大于0的值都将允许您对选项卡聚焦进行优先级设置，其中1具有最高优先级

现在您可以在div中使用焦点

如果您想使用Jquery

$("#yourDivID").focus();

如果您想使用JavaScript

document.getElementById("yourDivID").focus();

这正是您所需要的。请注意，这里有一些关键内容。首先，文档的主体需要有一个"onload"属性来调用"Focus"的小型简单脚本。我对您的代码所做的唯一更改是在div中添加了一个"id"属性。您可以根据需要进行更改。

享受吧！

<body  onload="Focus()">
<div id="myDiv" style="height:120px;width:120px;border:1px solid #ccc;font:16px/26px Georgia, Garamond, Serif;overflow:auto;">
As you can see, once there's enough text in this box, the box will grow scroll bars... that's why we call it a scroll box! You could also place an image into the scroll box.
</div>
 <script type="text/javascript">
 function Focus()
 {
    document.getElementById("myDiv").focus();
 }
 </script>
 </body>

您只需将这些代码复制到一个全新的文本文件中，并用.html扩展名保存，就可以看到这一点。然后双击它，它应该会在任何浏览器中打开。如果您启用了脚本，那么它应该可以滚动。

在DOM就绪时，只需设置焦点：

$("#yourTextboxID").focus();
相关文章：