Why is the cursor not going to the next checkbox if I press Tab

S

Stefan Mueller

If I click on the first image (mypic1.gif) and then press once theTab key
the focus is not going to the next checkbox within Internet Explorer. With
Mozilla Firefox it's working already the first time.

<html>
<body>
<img src= 'mypic1.gif' tabindex = '0'>
<input type = 'checkbox'>
<p>
<img src= 'mypic2.gif' tabindex = '0'>
<input type = 'checkbox'>
</body>
</html>

Is there any possibility to tell Internet Exporer also to jump to the next
checkbox if the Tab key is pressed only once?

Stefan
 
B

Blinky the Shark

If I click on the first image (mypic1.gif) and then press once theTab key
the focus is not going to the next checkbox within Internet Explorer. With
Mozilla Firefox it's working already the first time.

<html>
<body>
<img src= 'mypic1.gif' tabindex = '0'>
<input type = 'checkbox'>
<p>
<img src= 'mypic2.gif' tabindex = '0'>
<input type = 'checkbox'>
</body>
</html>

Is there any possibility to tell Internet Exporer also to jump to the next
checkbox if the Tab key is pressed only once?
Click to expand...

I've never used tabindex, but if it does what a similar construct does in
the databas front ends I've used, you should probably set each tabindex
value to different number.
 
W

wayne

Blinky said:
I've never used tabindex, but if it does what a similar construct does in
the databas front ends I've used, you should probably set each tabindex
value to different number.
Click to expand...
In the order you want the tabs to move.
 
S

Stefan Mueller

I've never used tabindex, but if it does what a similar construct does in
In the order you want the tabs to move.
Click to expand...

I use tabindex = '0' so that the Tab sequence is from top to down (left to
right). If I use
<html>
<body>
<img src= 'mypic.gif' tabindex = '1'>
<input type = 'checkbox' tabindex = '2'>
<p>
<img src= 'mypic.gif' tabindex = '3'>
<input type = 'checkbox' tabindex = '4'>
</body>
</html>
then the Tab sequence would be wrong.

Stefan
 
B

Benjamin Niemann

Stefan said:
If I click on the first image (mypic1.gif) and then press once theTab key
the focus is not going to the next checkbox within Internet Explorer. With
Mozilla Firefox it's working already the first time.

<html>
<body>
<img src= 'mypic1.gif' tabindex = '0'>
<input type = 'checkbox'>
<p>
<img src= 'mypic2.gif' tabindex = '0'>
<input type = 'checkbox'>
</body>
</html>

Is there any possibility to tell Internet Exporer also to jump to the next
checkbox if the Tab key is pressed only once?
Click to expand...

IMG element don't have a TABINDEX attribute and there's no defined meaning
for 'give focus to an IMG element'. Firefox give focus to the first INPUT
element on the first press of tab - it should be irrelevant that you
clicked on the image, though it might be necessary to click somewhere in
the document.

What do you really want?

Should the checkbox be toggled by clicking on the image?
This can be done by wrapping the IMG and the INPUT in a LABEL element:

<label>
<img src= 'mypic1.gif'>
<input type = 'checkbox'>
</label>

Or (in more complex layouts where the IMG and INPUT are not directly
adjacent):

<label for="box1"><img src= 'mypic1.gif'></label>
<input id="box1" type = 'checkbox'>

Should the checkbox just get focus when the image is clicked, but the state
should not change?
Might be done with JavaScript, but such a solution would be as unreliable as
JavaScript.

If you need the TABINDEX attribute (which is only needed, when the tab order
order is different from the source order), put it on the INPUT element. A
TABINDEX of 0 is the default and equal to no explicit TABINDEX attribute at
all.
 
S

Stefan Mueller

What do you really want?
Should the checkbox be toggled by clicking on the image?
This can be done by wrapping the IMG and the INPUT in a LABEL element:
Click to expand...


Yes, the checkbox should be toggled by clicking on the image. I need that to
color the checkbox. Please see the example on
http://nrkn.com/customCheck/

Therefore I'd like to reach the image also by pressing the Tab key.
With your code <label>...</label> the image never gets the focus even not
with Internet Explorer and Mozilla.

Stefan
 
B

Benjamin Niemann

Stefan said:
Yes, the checkbox should be toggled by clicking on the image. I need that
to color the checkbox. Please see the example on
http://nrkn.com/customCheck/

Therefore I'd like to reach the image also by pressing the Tab key.
With your code <label>...</label> the image never gets the focus even not
with Internet Explorer and Mozilla.
Click to expand...

IMG are not supposed to be interactive elements that can get focus (except
for an IMG inside of a BUTTON perhaps). That's why the browser will not
give it focus via tab, no matter how much you try.
If I would not think that your approach (emulating existing elements for the
sake of some pretty colors) is at least a bad idea, I could suggest that
you try using an INPUT with an image as SRC that can get focus...
 

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

Why is this WordPress comments form not submitting? 1
Only one table shows up with the information 2
Problems with 'tabindex' 6
I need help making a zooming function 11
How to make cursor auto tab to next textfield? 1
Emulating the <Tab> Key operation ? 11
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
why aren't i passing this parameter to the next page 1

Members online

Total: 52 (members: 1, guests: 51)
Robots: 476

Forum statistics

Threads
473,994
Messages
2,570,223
Members
46,813
Latest member
lawrwtwinkle111

Latest Threads

Top