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

一个<div>标签不能有焦点设置于它直接.所以我<a>在下面的函数中放了一个带有id 的空标签:

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