46

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?

Justin Emery
  • 1,644
  • 18
  • 25
webdad3
  • 8,893
  • 30
  • 121
  • 223
  • possible duplicate of [How can I give keyboard focus to a DIV and attach keyboard event handlers to it?](http://stackoverflow.com/questions/148361/how-can-i-give-keyboard-focus-to-a-div-and-attach-keyboard-event-handlers-to-it) – Jens Apr 12 '14 at 01:26
  • Possible duplicate of [Is it possible to focus on a
    using javascript focus() function?](http://stackoverflow.com/questions/3656467/is-it-possible-to-focus-on-a-div-using-javascript-focus-function)
     – Tim Malone Jul 06 '16 at 04:38

7 Answers7

103

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/

roberkules
  • 6,557
  • 2
  • 44
  • 52
  • 1
    Sweet. I had a modal dialog I couldn't cancel out of unless I had focus. It auto focused to the first field, but I sometimes disabled that field (editing instead of adding). I didn't want to auto focus on the next field, as it had placeholder text. So I was like "Can't I just focus on a div?" So I put a tabIndex of 0 on the parent div of the disabled field and it works. Thanks! – vbullinger Aug 03 '12 at 20:23
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>
"
Lucent Fox
  • 1,737
  • 1
  • 16
  • 24
1

I solve that doing the next:

<div tabindex="0" >
    <button onclick="element.parentNode.focus();"/>
</div>
IgniteCoders
  • 4,834
  • 3
  • 44
  • 62
0

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.

Ariel
  • 25,995
  • 5
  • 59
  • 69
  • I have a div and a table that is being generated. I need the div or the table to have focus. would the script that you are referring to be a vbscript or javascript? – webdad3 Jul 19 '11 at 21:26
  • 1
    javascript of course. And divs and tables can't have focus. (Focus means the cursor is blinking, ready for you to type.) – Ariel Jul 19 '11 at 21:38
  • maybe focus isn't the right word then.... Basically when the screen displays I want to be able to use the keyboard to move down the table (rows). Wouldn't there have to be some sort of focus? Maybe it is called something else. – webdad3 Jul 19 '11 at 21:41
  • Well, the keyboard can scroll the page. But if you really want to use the keyboard to jump to each row (like gmail does with each email) you'll need to program that specially. – Ariel Jul 19 '11 at 21:56
  • right now the page just displays the divs and tables in a sort of modal screen (not a real modal), but I need to click into the table to actually then be able to navigate up and down the table... What I'm asking is to mimic the click into the table after it loads – webdad3 Jul 19 '11 at 22:00
  • HTML doesn't have a concept of modal, so I'm not too clear on what you are doing. Are you putting the table in a box with its own scrollbars? (i.e. `overflow: scroll` ?) – Ariel Jul 19 '11 at 22:06
0

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.

Mrchief
  • 75,126
  • 20
  • 142
  • 189
0

You could use getElementsByClassName

<div tabindex="0" class="to-focus">TEXT</div>
<script> document.getElementsByClassName('to-focus')[0].focus()</script>
Joe
  • 80,724
  • 18
  • 127
  • 145
0

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

kapitanluffy
  • 1,269
  • 7
  • 26
  • 54