将键盘焦点设置为 <div>答案

【问题标题】：Set keyboard focus to a <div>将键盘焦点设置为 <div>
【发布时间】：2011-10-08 22:00:10
【问题描述】：

我有以下代码sn-p：

<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 时，我想设置焦点。我无法在 body 标签上放置 onLoad 函数，因为我不知道何时会生成 div。

<div> 标签不能直接设置焦点。所以我放了一个空的<a> 标签，并在下面的函数中调用了一个id：

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

我没有收到任何错误，并且我知道在显示页面时正在调用该函数（通过警报）。但是，当我使用箭头键或输入按钮时，整个页面都会移动（甚至不是显示数据的 div）。

当我单击其中一个表格元素时（使用鼠标）。之后，keydown 事件开始工作。我想做的是将数据呈现给用户并自动由键盘驱动。

有没有人对我如何做到这一点有任何建议？

【问题讨论】：

How can I give keyboard focus to a DIV and attach keyboard event handlers to it? 的可能重复项
Is it possible to focus on a <div> using javascript focus() function?的可能重复

标签： javascript jquery html setfocus

【解决方案1】：

在最后一个 div 输出带有 scrollTo() 的 script 之后，动态生成 div 的函数将有上下文可用于知道要关注哪个 div专注于你想要的 div。为每个 div 分配一个 ID，这样您就可以从集合中选择它。

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

【讨论】：

你知道如何使用 VBScript 为 div 设置焦点吗？
您实际上需要将javascript输出到页面，浏览器将对其进行处理以设置焦点。不能直接从asp设置焦点。
见我更新的答案。您需要将 id="myDiv13" 添加到每个 div，然后您可以根据最后的一些逻辑选择您想要的。
使用 scrollIntoView() 函数代替 focus()。
@Jeff - 如果您提供一个包含一些 asp 代码的（精简的）示例，可能会更好？

【解决方案2】：

你不能聚焦一个 div。您的意思是聚焦输入吗？

无论如何，您都可以在 HTML 中包含一个简短的脚本标记以将某些内容集中在正确的位置 - 只需将脚本放在 div 之后 - 甚至可以放在 div 内。

【讨论】：

我有一个 div 和一个正在生成的表。我需要 div 或 table 来获得焦点。您所指的脚本是 vbscript 还是 javascript？
当然是javascript。而且 div 和表格不能有焦点。（焦点表示光标正在闪烁，准备好输入。）
也许焦点不是正确的词......基本上当屏幕显示时，我希望能够使用键盘向下移动表格（行）。不是必须有某种焦点吗？也许它被称为别的东西。
嗯，键盘可以滚动页面。但如果你真的想使用键盘跳转到每一行（就像 gmail 对每封电子邮件所做的那样），你需要专门对其进行编程。
现在页面只是在一种模态屏幕（不是真正的模态）中显示 div 和表格，但我需要点击表格才能真正上下导航表格......我要问的是在表格加载后模拟点击进入表格

【解决方案3】：

你能控制asp函数吗？如果是，那将是最容易设置焦点的地方。否则，您可以监听DOMNodeInserted 事件（注意：浏览器支持可能会有所不同）并根据适当的条件将焦点设置为div（或其子级）。

【讨论】：

【解决方案4】：

你可以使用getElementsByClassName

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

【讨论】：

【解决方案5】：

如果您添加 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/添加了一个简单的演示

【讨论】：

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

【解决方案6】：

你的意思是你想在生成 div 时聚焦它吗？尝试重新搜索这些

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

和

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

对于按键..

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

afaik div 和其他元素可以像 wiki 中一样具有某种焦点，例如..

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

它会在那里自动滚动。我只是不知道怎么做。

至于动态生成的 div 和表可以使用 jquery 的 live() 函数

【讨论】：

【解决方案7】：

我解决了下一个问题：

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

【讨论】：