将键盘焦点设置到一个<div>元素

Question

我有以下代码片段：

<div id="listbox1div" style="z-index:95; background:white; overflow-y:auto; overflow-x:hidden; width:240; height:314px;">
<a id="focusLink2"></a>
<table id="ptObj_listbox1...

我有一个页面，动态构建了如上所示的<div>元素。这个<div>会显示在主屏幕之上。当页面生成这些div时，我想设置焦点。由于我不知道何时会生成divs，因此无法在body标签上使用onLoad函数。

<div>标记不能直接设置焦点。因此，我放置了一个空的<a>标记并为其设置了一个ID，在以下函数中调用：

function setTableFocus(count){
        var flinkText = 'focusLink'+count;
       document.getElementById(flinkText).focus();
}

我没有看到任何错误，我知道当页面呈现时函数被调用了（通过弹窗），但是当我使用箭头键或回车键时，整个页面会移动（甚至不是呈现数据的 div）。

当我使用鼠标点击表中的一个元素时，keydown 事件开始工作。我希望这样做的效果是向用户呈现数据，并自动由键盘驱动。

有人有什么建议可以实现这个吗？

- webdad3

---

可能是重复的问题：如何将键盘焦点放在DIV上并附加键盘事件处理程序？ - Jens

可能是重复的问题Is it possible to focus on a <div> using javascript focus() function? - Tim Malone

Answer 1

如果您添加tabindex属性，就可以使div可聚焦。

请参阅：http://snook.ca/archives/accessibility_and_usability/elements_focusable_with_tabindex

tabindex值可以允许一些有趣的行为。

• 如果给定值“-1”，则该元素无法通过标签键进行聚焦，但可以通过编程方式（使用element.focus()）将焦点设置到元素上。
• 如果给定值0，则可以通过键盘聚焦该元素，并进入文档的标签流中。
• 大于0的值创建具有优先级级别，其中1是最重要的。

更新：在http://jsfiddle.net/roberkules/sXj9m/ 上添加了一个简单的演示。

- roberkules

---

太好了。我有一个模态对话框，除非我有焦点，否则我无法取消。它自动聚焦到第一个字段，但有时我会禁用该字段（而不是添加）。我不想自动聚焦到下一个字段，因为它有占位符文本。所以我就想：“我能不能只聚焦在一个div上？”于是我在禁用字段的父div上放置了tabIndex为0，它就可以工作了。谢谢！ - vbullinger

Answer 2

动态生成 div 的函数将会拥有上下文，以了解应该聚焦哪个 div，在输出最后一个 div 后，使用 script 的 scrollTo() 来聚焦于所需的 div。给每个 div 分配一个 ID，这样就可以从集合中选择它。

Response.Write "
<script language='text/javascript'>
document.getElementById('div#').scrollIntoView();
</script>
"

- Lucent Fox

---

你知道如何使用VBScript将焦点设置到一个div中吗？ - webdad3

你实际上需要将JavaScript输出到页面，然后由浏览器处理以设置焦点。无法直接从asp设置焦点。 - Lucent Fox

请查看我的更新答案。您需要在每个div中添加id="myDiv13"，然后在最后根据某些逻辑选择您想要的那个。 - Lucent Fox

请使用scrollIntoView()函数，而不是focus()。 - Lucent Fox

@Jeff - 也许最好提供一个包含一些ASP代码的（简化的）示例？ - roberkules

Answer 3

我解决这个问题的方法是：

<div tabindex="0" >
    <button onclick="element.parentNode.focus();"/>
</div>

- IgniteCoders

Answer 4

你可以使用 getElementsByClassName。

<div tabindex="0" class="to-focus">TEXT</div>
<script> document.getElementsByClassName('to-focus')[0].focus()</script>

- Joe

Answer 5

您是否掌控了ASP函数？如果是的话，那将是设置焦点最简单的地方。否则，您可以监听DOMNodeInserted事件（注意：浏览器支持可能会有所不同），并根据适当的条件将焦点设置到div（或其子元素）。

- Mrchief

Answer 6

你的意思是每当生成div时，你想要将焦点放在它上面吗？ 尝试研究这些内容。

http://api.jquery.com/focus/

并且

http://api.jquery.com/live/

而对于按键操作..

http://api.jquery.com/keypress/

据我所知，div和其他元素可以像维基百科一样具有某种焦点。

http://en.wikipedia.org/wiki/JavaScript#Cross-site_vulnerabilities

它会自动滚动到那里，但我不确定如何实现。

至于动态生成的div和表格，您可以使用jQuery的live()函数。

- kapitanluffy

Answer 7

你无法将 div 进行聚焦。您是指聚焦输入框吗？

无论如何，您可以在 HTML 中包含一个简短的脚本标签来聚焦某些东西 - 只需将脚本放在 div 的后面 - 或者甚至放在 div 内部。

- Ariel

---

我有一个div和一个正在生成的表格。我需要div或表格获得焦点。你所指的脚本是vbscript还是javascript？ - webdad3

JavaScript当然可以。但是div和table不能获得焦点（焦点意味着光标正在闪烁，准备让您输入）。 - Ariel

也许“焦点”不是正确的词……基本上，当屏幕显示时，我想能够使用键盘向下移动表格（行）。那么就必须有某种形式的焦点吧？也许它被称为其他什么东西。 - webdad3

好的，键盘可以滚动页面。但是如果你真的想要使用键盘跳转到每一行（就像Gmail对每封电子邮件所做的那样），你需要特别编写程序。 - Ariel

现在页面只是以模态屏幕（不是真正的模态）显示div和表格，但我需要点击表格才能实际上能够在表格中向上或向下导航...我的请求是在加载后模仿点击表格。 - webdad3

HTML没有模态的概念，所以我不太清楚你在做什么。你是把表格放在一个带有自己滚动条的框里吗？（即overflow: scroll？） - Ariel