将键盘焦点设置为<div></div><div id="text_translate"><p>我有以下代码片段：</p><pre> &lt;div id="listbox1div" style="z-index:95; background:white; overflow-y:auto; overflow-x:hidden; width:240; height:314px;"&gt; &lt;a id="focusLink2"&gt;&lt;/a&gt; &lt;table id="ptObj_listbox1...</pre><p> 我有一个动态构建&lt;div&gt;元素的页面（例如上面）。 这个&lt;div&gt;在主屏幕顶部显示数据。 当页面生成 div 时，我想设置焦点。 我不能将 onLoad function 放在 body 标签上，因为我不知道何时会生成 div。</p><p> &lt;div&gt;标签不能直接设置焦点。 所以我在下面的 function 中放置了一个带有 id 的空&lt;a&gt;标签：</p><pre> function setTableFocus(count){ var flinkText = 'focusLink'+count; document.getElementById(flinkText).focus(); }</pre><p> 我没有收到任何错误，并且我知道在显示页面时（通过警报）正在调用 function。 但是，当我使用箭头键或输入按钮时，整个页面都会移动（甚至不是显示数据的 div）。</p><p> 当我单击其中一个表格元素时（使用鼠标）。 之后，keydown 事件开始工作。 我想做的是将数据呈现给用户并自动由键盘驱动。</p><p> 有人对我如何做到这一点有任何建议吗？</p></div>

Question

I have the following code snippet:

<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...

I have a page that is building <div> elements dynamically (such as above). This <div> displays data on top of the main screen. When the page generates the divs I would like to set focus. I can not put an onLoad function on the body tag as I don't know when the divs will be generated.

A <div> tag can not have focus set on it directly. So I put an empty <a> tag with an id that I'm calling in the following function:

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

I'm not getting any errors and I know the function is being called when the page is presented (via alerts). However, when I using the arrow keys or enter button the entire page moves (not even the div that is presenting the data).

When I click on to one of the table elements (using the mouse). After that the keydown event starts working. What I would like this to do is to present the data to the user and automatically be keyboard driven.

Does anyone have any suggestions how I can accomplish this?

Answer 1

you can make a div focusable if you add a tabindex attribute.

see: http://snook.ca/archives/accessibility_and_usability/elements_focusable_with_tabindex

The tabindex value can allow for some interesting behaviour.

• If given a value of "-1", the element can't be tabbed to but focus can be given to the element programmatically (using element.focus()).
• If given a value of 0, the element can be focused via the keyboard and falls into the tabbing flow of the document.
• Values greater than 0 create a priority level with 1 being the most important.

UPDATE: added a simple demo at http://jsfiddle.net/roberkules/sXj9m/

Answer 2

The function that's dynamically generating the divs will have the context available to know which div to focus on, after the last div output a script with a scrollTo() to focus on the div you want. Assign each div an ID, so you'll be able to choose it out of the set.

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

Answer 3

I solve that doing the next:

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

Answer 4

You can't focus a div. Do you mean focus an input?

Anyway, you can include a short script tag to focus something right in the HTML - simply put the script right after the div - or even inside the div.

Answer 5

Are you in control of the asp function? If yes, then that'd be the easiest place to set focus. Otherwise, you could listen to DOMNodeInserted event (note: browser support may vary) and set focus to div (or its children) based on appropriate conditions.

Answer 6

You could use getElementsByClassName

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

Answer 7

do you mean you want to focus the divs whenever it is generated? try reasearching for these

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

and

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

and for the keypress..

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

afaik divs and other elements can have focus of some sort like in wikis, like..

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

and it'll scroll automatically there. I am just no sure how.

as for the dynamically generated divs and tables you can use jquery's live() function