Problems with 'tabindex'

02-20-2006

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

02-20-2006

Stefan Mueller wrote:
> 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'>

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

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?

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?

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

02-22-2006

>> 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'>
>
> Why are you placing the tabindex attribute on the image and not on the
> form input?

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()

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

02-22-2006

"Stefan Mueller" <seekware-remove-@yahoo.com> wrote:

>>> 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'>
>>
>> Why are you placing the tabindex attribute on the image and not on the
>> form input?
>
>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.

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

>> Assuming that you do/will assign an id to each image, then in theory:
>> document.getElementById(imageId).focus()
>
>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?

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
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <> <http://steve.pugh.net/>

02-23-2006

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

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.

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

02-23-2006

Stefan Mueller wrote:

>>Why do the images ever need to get focus? What can the user do with a
>>focussed image?
>
>
> 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.
>
>
> 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?

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

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

02-24-2006

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

Great, your code works perfect.

Many thanks
Stefan

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Saving the web, charset problems and symbols problems	Sak Na rede	Ruby	0	01-30-2009 05:05 AM
Problems, problems for newbie	Shelly	ASP .Net	1	09-03-2007 02:10 AM
Problems compiling simple C++ code (also problems with std::string)	Susan Baker	C++	2	06-26-2005 01:43 AM
Re: sound problems and modem problems	Harold Potter	Computer Support	5	12-04-2003 04:12 PM