Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set keyboard focus to a <div>

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?

like image 471
webdad3 Avatar asked Jul 19 '11 21:07

webdad3


People also ask

Can you set focus on a div?

Yes - this is possible. In order to do it, you need to assign a tabindex...

How do I add focus to element on keyboard?

In most browsers, users can move focus by pressing the Tab key and the Shift + Tab keys. The following elements can receive focus: <a> tags with an href attribute. Form controls and buttons (unless the element is disabled)

How do you set focus on a specific element in HTML?

To set focus to an HTML form element, the focus() method of JavaScript can be used. To do so, call this method on an object of the element that is to be focused, as shown in the example. Example 1: The focus() method is set to the input tag when user clicks on Focus button.


2 Answers

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/

like image 127
roberkules Avatar answered Sep 17 '22 19:09

roberkules


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> " 
like image 28
Lucent Fox Avatar answered Sep 21 '22 19:09

Lucent Fox