Problems with 'tabindex'

Discussion in 'HTML' started by Stefan Mueller, Feb 20, 2006.

  1. 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
     
    Stefan Mueller, Feb 20, 2006
    #1
    1. Advertising

  2. Stefan Mueller

    Steve Pugh Guest

    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
     
    Steve Pugh, Feb 20, 2006
    #2
    1. Advertising

  3. >> 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
     
    Stefan Mueller, Feb 22, 2006
    #3
  4. Stefan Mueller

    Steve Pugh Guest

    "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?

    >
    >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/>
     
    Steve Pugh, Feb 22, 2006
    #4
  5. > 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
     
    Stefan Mueller, Feb 23, 2006
    #5
  6. 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
     
    Jonathan N. Little, Feb 23, 2006
    #6
  7. >> Is there a command to set the focus to the first input box?

    Great, your code works perfect.

    Many thanks
    Stefan
     
    Stefan Mueller, Feb 24, 2006
    #7
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Ravikanth[MVP]

    TabIndex of DataGrids

    Ravikanth[MVP], Jul 18, 2003, in forum: ASP .Net
    Replies:
    2
    Views:
    364
    Deidre
    Jul 21, 2003
  2. kai

    Tabindex

    kai, Jan 9, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    4,046
  3. Natty Gur
    Replies:
    1
    Views:
    1,921
    Marshal Antony
    Mar 3, 2004
  4. Jarod_24

    how does TabIndex work?

    Jarod_24, Apr 5, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    783
    Jarod_24
    Apr 5, 2004
  5. Jarod_24

    TabIndex

    Jarod_24, Apr 10, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    3,803
Loading...

Share This Page