Saturday, April 13, 2024
 Popular · Latest · Hot · Upcoming
44
rated 0 times [  51] [ 7]  / answers: 1 / hits: 64832  / 13 Years ago, tue, july 19, 2011, 12:00:00

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?


More From » jquery

 Answers
7

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/


[#91113] Monday, July 18, 2011, 13 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
kenandwightb

Total Points: 241
Total Questions: 95
Total Answers: 111

Location: Jersey
Member since Fri, Oct 1, 2021
3 Years ago
;