• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 670
  • Last Modified:

dynamically set tab stop

I am writing asp.net apps and I am bored with setting tab stops for my end users.  What I want is a script that I can drop on the page and it will dynamically create the correct tab stop order for me.  I know very little JavaScript and I didnt see anything on the web so I thought I would look here for some help.  

Thanks
0
Fred Goodwin
Asked:
Fred Goodwin
  • 7
  • 4
  • 3
1 Solution
 
devicCommented:
maybe you need just tabindex:
=======================
<a href=# tabindex=3>3</a>
<a href=# tabindex=1>1</a>
<input value="2" tabindex=2>
<input value="4" tabindex=4>
0
 
Fred GoodwinVP of Software DevelopmentAuthor Commented:
that requires me to code each one.  I dont want to do that.  I want to have the script set those based on x y position and decide what is 1 and what is 2 ...

I am putting out about 600 pages and If I can drop a scipt vs coding each one by hand I can save a lot of time.
0
 
dougdayCommented:
Well, creating a script to do this for you depends on exactly in what order you want tab stops to appear.

Could you give an example of what you want and I can probably quickly write a script for you?

-Doug
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Fred GoodwinVP of Software DevelopmentAuthor Commented:
Thanks for your reply

I would want tabstop 1 to be top left.  Most of the pages have 2 columns so I would want to go all the way down column 1 then to the top of column 2 and all of the way down it.  Then there are some buttons on the bottom right of the page I would want to hit.

Is that the info you were looking for?

Thanks
0
 
dougdayCommented:
Yeah, that should do it.  Here's an example using the script:

<html>
<head>
<script>
var tab_index = 1;
function set_tabs(elm, begin) {
    if (begin) tab_index = 1;
    if (typeof(elm) == 'string') elm = document.getElementById(elm);
    else if (typeof(elm) == 'undefined') elm = document.documentElement;

    if (elm && (elm.nodeName == 'INPUT' || elm.nodeName == 'SELECT' || elm.nodeName == 'TEXTAREA')) {
        elm.tabIndex = tab_index;
        tab_index++;
    }

    for (var i = 0; i < elm.childNodes.length; i++)
        set_tabs(elm.childNodes[i]);
}
</script>
</head>

<body>

<form name="test" id="test">

<table border="0">
<tr>
  <td id="left_column">
    <input type="text" value="" />
    <input type="text" value="" />
    <input type="text" value="" />
    <input type="text" value="" />
    <input type="text" value="" />
    <input type="text" value="" />
    <select>
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>
    <input type="text" value="" />
    <input type="text" value="" />
    <input type="text" value="" />
    <input type="text" value="" />
    <input type="text" value="" />
  </td>
  <td id="right_column">
    <input type="text" value="" />
    <input type="text" value="" />
    <input type="text" value="" />
    <input type="text" value="" />
    <input type="text" value="" />
    <select>
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>
    <input type="text" value="" />
    <input type="text" value="" />
    <input type="text" value="" />
    <input type="text" value="" />
    <input type="text" value="" />
    <input type="text" value="" />
  </td>
</tr>
</table>
</form>

<script>
    set_tabs("right_column", true);
    set_tabs("left_column");
</script>

</body>
</html>
0
 
dougdayCommented:
This example makes the right column have tab stops, and then the left column (just to show you what it does).

For what you want to do, take the set_tabs() function, and place it in your code.  Don't forget to copy the "var tab_index = 1;" line above it.  Then, somewhere on your page, call the set_tabs function on the id of your left column, then your right column.

If you have the html to your page, I can add the set_tabs() function for you.

-Doug
0
 
Fred GoodwinVP of Software DevelopmentAuthor Commented:
Im using asp.net so the html is rendered dynamically.  I will give this a shot and let you know.  Thanks a lot
0
 
dougdayCommented:
No problem.
-Doug
0
 
devicCommented:
imsolost, dougday already answered your question and it works fine.

here is my version and I don't want any points.

QUESTION FOR ALL:
========================================
how to call my function?
========================================

<script>
function set_tabs()
{
      var args=set_tabs.arguments;
      var curTab=1;
      for(var i=1;i<args.length;i++)
      {
            var el=document.getElementById(args[i]).getElementsByTagName("*");
            for(var j=0;j<el.length;j++)
            {
                  if(el[j].nodeName.match(args[0]))
                  {
                        el[j].tabIndex=++curTab;            
                        el[j].onfocus=function(){this.style.background="yellow"};
                        el[j].onblur=function(){this.style.background="white"};
                  }
            }
      }
}
</script>

0
 
dougdayCommented:
set_tabs("INPUT", "id1", "id2", ...);
0
 
devicCommented:
bingo :)
also first param can be a regexp.
0
 
dougdayCommented:
Not bad :)  I take it that's why you didn't just getElementsByTagName(args[0]);
0
 
Fred GoodwinVP of Software DevelopmentAuthor Commented:
Perfect.  Thanks for the help
0
 
dougdayCommented:
No problem.  Glad it worked for you.
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 7
  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now