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时，我想设置焦点。我不能在body标签上放一个onLoad函数，因为我不知道什么时候会生成div。

<div>标记无法直接设置焦点。所以我在下面的函数中添加了一个带有id的空<a>标记：

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

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

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

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

Answer 1

如果您添加div属性，则可以使tabindex具有焦点。

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

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


如果给定值为“-1”，则元素无法选项卡，但焦点可以   以编程方式给予元素（使用element.focus（））。

如果给定值为0，则可以通过键盘对焦元素   落入文件的标签流程。

大于0的值会创建一个优先级，其中1是最重要的。

更新：在http://jsfiddle.net/roberkules/sXj9m/

添加了一个简单的演示

Answer 2

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

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

Answer 3

你不能集中一个div。你的意思是集中注意力吗？

无论如何，你可以包含一个简短的脚本标记来将重点放在HTML中 - 只需将脚本放在div之后 - 或者甚至放在div中。

Answer 4

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

Answer 5

您可以使用getElementsByClassName

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

Answer 6

你的意思是你想在生成div时集中它吗？尝试重新研究这些

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

和

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

和按键..

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

afaik divs和其他元素可以像wiki中那样关注某些焦点，比如..

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

它会在那里自动滚动。我只是不确定如何。

对于动态生成的div和表，您可以使用jquery的live（）函数

Answer 7

我解决了下一步：

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

将键盘焦点设置为<div> </div>

7 个答案: