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?

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

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?

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:


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.

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

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top