Question

我有一个类似于的滚动框：

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

现在，您必须在页面加载后单击它，以便使用箭头键上下移动。我希望它是这样的，在页面加载时，焦点已经在它内部，所以你不必在其中单击以使用箭头键。有没有办法做到这一点？

谢谢！

Answer 1

div不是焦点元素，因此焦点函数可能不起作用，将tabindex属性添加到div以使焦点功能正常工作。

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

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

0将允许您使用键盘箭头和Tab键
-1将禁用标签，但它仍然可以对焦
任何大于0的内容都可以让你对标签重点进行优化，其中1具有最高优先级

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

了如果你想使用Jquery

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

如果你想使用JavaScript

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

Answer 2

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

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

Answer 3

这正是您所需要的。请注意，这里有一些关键的事情。首先，文档的主体需要具有“onload”属性，为“焦点”调用小的简单脚本。我对您的代码所做的唯一更改是为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扩展名保存它来查看此工作。然后双击它，它应该在任何浏览器中打开。如果您启用了脚本，那么它应该滚动得很好。

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

3 个答案: