Problems with 'tabindex'

S

Stefan Mueller

This html code should demonstrate my problems with 'tabindex':
<img src= 'pic23.gif' tabindex = '0'>
<input type = 'text'>
<p>
<img src= 'pic12.gif' tabindex = '0'>
<input type = 'text'>
<p>
<img src= 'pic25.gif' tabindex = '0'>
<input type = 'text'>


In my project I have on each row a picture and a textbox. The sequencing of
the rows is randomized because I use some sort of algorithm programmed with
JavaScripts.

1) My goal is that if you load/reload the page the cursor is always located
at the first image (most top and left) independent of how the rows are
sorted.
How can I locate the cursor always to the first image? I guess somehow
with
<body onLoad = "...">

2) I'd like that the cursor is going by pressing the 'Tab' key from the
first image to the textbox on its right side and then to the second image
and so on.
For that reason I use
tabindex = '0'
That works fine with Mozilla Firefox and with the Internet Explorer .
However, if you click with your mouse on an image then with Internet
Explorer (with Mozilla Firefox it works perfect) you have to press the 'Tab'
key twice to get to the next textbox.
Why that and does anyone know a workaround so that one 'Tab' would be
enough to go to the next textbox?

3) In Opera the cursor is never located on an image even not if you press
the 'Tab' key several times.
Is there another possibility to show an image with Opera which gets the
focus and which has an 'onBlur' event, so that I know when the cursor leaves
the image?

Stefan
 
S

Steve Pugh

Stefan said:
This html code should demonstrate my problems with 'tabindex':
<img src= 'pic23.gif' tabindex = '0'>
<input type = 'text'>
<p>
<img src= 'pic12.gif' tabindex = '0'>
<input type = 'text'>
<p>
<img src= 'pic25.gif' tabindex = '0'>
<input type = 'text'>
Click to expand...

Why are you placing the tabindex attribute on the image and not on the
form input?
In my project I have on each row a picture and a textbox. The sequencing of
the rows is randomized because I use some sort of algorithm programmed with
JavaScripts.

1) My goal is that if you load/reload the page the cursor is always located
at the first image (most top and left) independent of how the rows are
sorted.
How can I locate the cursor always to the first image? I guess somehow
with
<body onLoad = "...">
Click to expand...

Assuming that you do/will assign an id to each image, then in theory:
document.getElementById(imageId).focus()

But giving focus to images may or may not be possible in various
browsers.

But please reconsider this. If the page is slow to load the user may
already have moved the focus and started some action (typing in an
input field for example) before your script moves the focus - screwing
up whatever it was they were doing.
2) I'd like that the cursor is going by pressing the 'Tab' key from the
first image to the textbox on its right side and then to the second image
and so on.
For that reason I use
tabindex = '0'
That works fine with Mozilla Firefox and with the Internet Explorer .
However, if you click with your mouse on an image then with Internet
Explorer (with Mozilla Firefox it works perfect) you have to press the 'Tab'
key twice to get to the next textbox.
Why that and does anyone know a workaround so that one 'Tab' would be
enough to go to the next textbox?
Click to expand...

Get rid of the tabindex on the images?
3) In Opera the cursor is never located on an image even not if you press
the 'Tab' key several times.
Is there another possibility to show an image with Opera which gets the
focus and which has an 'onBlur' event, so that I know when the cursor leaves
the image?
Click to expand...

Opera separates the form element cycle (accessed via tab) and the link
cycle (accessed via Q/A). (And then there's spatial navigation on top
of that.) If your image isn't a link then I'm not sure how to give it
focus with the keyboard in Opera.

Steve
 
S

Stefan Mueller

This html code should demonstrate my problems with 'tabindex':
Why are you placing the tabindex attribute on the image and not on the
form input?
Click to expand...

If I set the tabindex attribute on the form input like
<img src= 'my_pic.gif'>
<input type = 'text' tabindex = '0'>
<p>
<img src= 'my_pic.gif'>
<input type = 'text' tabindex = '0'>
<p>
<img src= 'my_pic.gif'>
<input type = 'text' tabindex = '0'>
then the images never gets the focus if you press the 'Tab' key.

Assuming that you do/will assign an id to each image, then in theory:
document.getElementById(imageId).focus()
Click to expand...

Yes, but I don't know the imageId of the first image because the rows get
sorted before the focus has to be set to the first image. Is there a way to
figure that the imageId of the first picture?

Stefan
 
S

Steve Pugh

Stefan Mueller said:
If I set the tabindex attribute on the form input like
<img src= 'my_pic.gif'>
<input type = 'text' tabindex = '0'>
<p>
<img src= 'my_pic.gif'>
<input type = 'text' tabindex = '0'>
<p>
<img src= 'my_pic.gif'>
<input type = 'text' tabindex = '0'>
then the images never gets the focus if you press the 'Tab' key.
Click to expand...

Why do the images ever need to get focus? What can the user do with a
focussed image?
Yes, but I don't know the imageId of the first image because the rows get
sorted before the focus has to be set to the first image. Is there a way to
figure that the imageId of the first picture?
Click to expand...

You could have the script that randomly sorts the rows tell you the id
of the first image (as presumably it knows the id of the first row).

Or if you know the number of images preceeding the random rows then
document.images[n].focus() where n is the number of preceeding images.

Steve
 
S

Stefan Mueller

Why do the images ever need to get focus? What can the user do with a
focussed image?
Click to expand...

I need a focused image e.g. to color a ckeckbox. Here is an example
http://nrkn.com/customCheck/

Or if you know the number of images preceeding the random rows then
document.images[n].focus() where n is the number of preceeding images.
Click to expand...

Cool, with
document.images[0].focus()
I can set the focus to the first image. Is there also a similar command to
set the focus to the first input box?

Stefan
 
J

Jonathan N. Little

Stefan said:
Why do the images ever need to get focus? What can the user do with a
focussed image?
Click to expand...


I need a focused image e.g. to color a ckeckbox. Here is an example
http://nrkn.com/customCheck/


Or if you know the number of images preceeding the random rows then
document.images[n].focus() where n is the number of preceeding images.
Click to expand...


Cool, with
document.images[0].focus()
I can set the focus to the first image. Is there also a similar command to
set the focus to the first input box?
Click to expand...


<script type="text/javascript">
function gotoFirst(){
var inputs=document.getElementsByTagName("input");
if(inputs.length){
var theFirst=inputs[0];
theFirst.focus();
}
}
window.onload=gotoFirst;
</script>
 
S

Stefan Mueller

Is there a command to set the focus to the first input box?

Great, your code works perfect.

Many thanks
Stefan
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Check forms With JavaScript 1
How to set a tab stop (tabindex) on a image in Opera 4
Help with Visual Lightbox: Scripts 2
Only one table shows up with the information 2
Why is the cursor not going to the next checkbox if I press Tab 7
Stuck with html and css 25
Help with my responsive home page 2
Gallery - mosiac/grid layout with filtering and information page popup 1

Members online

No members online now.
Total: 27 (members: 0, guests: 27)
Robots: 355

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,065
Latest member
OrderGreenAcreCBD

Latest Threads

Top