SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2008
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Forced Navigation using tabindex

    Hey all.

    I converting GUI code to HTML and one behavior I'm trying to duplicate is moving to the next element based on tabindex.

    Basically, the app will be running in a touch screen environment and for speed, quantities are entered into a fill-in and then an "enter" button is pressed. When the enter button is pressed, focus is then moved to the next quantity field.

    I have the tabindex for the quantity fields assigned so I need a way of moving focus to the next tabindex when a button is clicked. I'm thinking it would be something like forcing the tab key event.

    I've googled it but couldn't find anything about forcing the tab event.

    Any ideas?

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.java2s.com/Code/JavaScrip...enextfield.htm

    Might be of some use?

    If not, then you can write an onchange event that would automatically focus the next element in the tabindex


  3. #3
    SitePoint Zealot
    Join Date
    Mar 2008
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gRoberts View Post
    http://www.java2s.com/Code/JavaScrip...enextfield.htm

    Might be of some use?

    If not, then you can write an onchange event that would automatically focus the next element in the tabindex
    That is what I was planning, but I'd have to store the current tabindex in a hidden field and increment it. I didn't know if that was a "typical" way, or "accepted" way of doing it. I can pretty much do what I need to do, but I want to make sure that I'm not being a "bedroom hacker".

  4. #4
    SitePoint Zealot
    Join Date
    Mar 2008
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gRoberts View Post
    http://www.java2s.com/Code/JavaScrip...enextfield.htm

    Might be of some use?

    If not, then you can write an onchange event that would automatically focus the next element in the tabindex
    That does look like what I need. Thanks.

  5. #5
    SitePoint Zealot
    Join Date
    Mar 2008
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, looks like I spoke too soon. I have the tabindex being set, but other elements are being set by default. How do I take elements out of the tab order? I tried tabindex="0" but that didn't work.

    Also, is there a way of setting the tabindex in CSS? I tried tabindex: none; but that didn't work.

  6. #6
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm... Whats the script you've used? You can tell it not to process tabindexes with a certain value.


  7. #7
    SitePoint Zealot
    Join Date
    Mar 2008
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gRoberts View Post
    Hmmm... Whats the script you've used? You can tell it not to process tabindexes with a certain value.
    What happens is I use Webspeed to create the HTML and when the row is created, I assign a tabindex to the qty fill-in field. So for example, if there are 1000 items to be displayed, there are 1000 rows with tabindexes of 1 - 1000.

    The table data is created "on the fly".

    The problem is that there are buttons before the first table row that are being included as tab elements so when I increment from 1 to 2, instead of the second row of the table getting focus, the second tab index, a button, gets focus.

    I went ahead and put tabindex="-1" on all the elements on the page but I haven't tested it yet. If I can isolate just the elements (table rows) I want to have a tabindex, I'll get to where I want to be. I have the javascript to do the navigation, it's a question of excluding all the elements from having a tabindex that don't need it.

  8. #8
    SitePoint Zealot
    Join Date
    Mar 2008
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can begin with a tabindex of 7, the first row in the table, but I would rather not do that.

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You should number the tabindex in the order you want the fields to get the focus. Any fields without a tabindex will be added to the end. No JavaScript required.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  10. #10
    SitePoint Zealot
    Join Date
    Mar 2008
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is for a touch screen app so there is no tab key readily available. There is a "number pad" and when they click a qty, they then click an enter button which takes them to the next field in the tab order. So if there are 100 items and they are on item 50, they click enter and it moves the focus from 50 to 51.

    I have it figured out. I set the tabindex of teh first record in the table to 7, bypassing the buttons before it.

    If I set it starting at 1, when I try to go from the first record in the table (tabindex 1 but 7th element on screen) to the second row (tabindex 2 but 8th element on screen), it takes me to tabindex 2 which is a button.

  11. #11
    SitePoint Zealot
    Join Date
    Mar 2008
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    You should number the tabindex in the order you want the fields to get the focus. Any fields without a tabindex will be added to the end. No JavaScript required.
    I still can't get this to work. As I add hidden fields to the page, I have to increase the tabindex starting point for the table data.

    I've tried setting tabindex="-1" and I've also tried setting tabindex="100", just to get it of the top 20 but nothing works.

    ...

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Please stop using tabindex, it's an accessibility nightmare and is completely unnecessary when good form design is in use.

    See the Accesskeys and tabindex section of Web Accessibility Gone Wild article
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •