Forums
This topic is locked
Tabindex
Posted 14 Oct 2004 02:42:57
1
has voted
14 Oct 2004 02:42:57 Killian Walsh posted:
I have a page with a "Next" navigation text near the bottom of a page wich contains a list of records from a recordset.What can I do so that when a user opens the page containing the list, he can press Enter straight away which will activate the "Next" link.
If I use tabindex="1" you still have to press Tab twice in order to get to "Next". (IE's address bar is first)
Please help!
Replies
Replied 04 Nov 2004 21:53:42
04 Nov 2004 21:53:42 A. M. replied:
This happens in Firefox(Mozilla) too, it's not just an IE thing. The way I've gotten around it is to tabindex everything. Whenever the browser senses that it's used up the last 'un-indexed' field and is going to start working with 'indexed' fields (or vice versa) it jumps back to the address bar (and then the google toolbar if, like me, you have that installed too) before moving on. So if you want to use tab indexes at all you've got to use them all the way through--then the tab won't go to the address bar until after the last index has been hit.
The way to start to things off right is to use javascript with OnLoad to focus the cursor on the place you want to start (it's easiest to have this be tabindex=1, but not required, you could use any number for this--but why not start with 1?) and just make sure you have higher indexes for the other objects.
Here is a quick sample of how I get around it.
<html>
<head><title>TabIndex Test</title></head>
<Script Language="JavaScript">
function setTab()
{
document.testForm.first.focus();
}
</Script>
<body onLoad="setTab()">
<form action="" name="testForm" id="testForm">
<input type="text" id="fourth" name="fourth" size="10" tabindex="4"><br>
<input type="text" id="first" name="first" size="10" tabindex="1"><br>
<input type="text" id="fifth" name="fifth" size="10" tabindex="5"><br>
<input type="text" id="sixth" name="sixth" size="10" tabindex="6"><br>
<input type="text" id="seventh" name="seventh" size="10" tabindex="7"><br>
<input type="text" id="eighth" name="eighth" size="10" tabindex="8"><br>
<input type="text" id="second" name="second" size="10" tabindex="2"><br>
<input type="text" id="ninth" name="ninth" size="10" tabindex="9"><br>
<input type="button" name="third" id="third" value="submit" tabindex="3">
</form>
</body>
</html>
Of course you could set the focus to one of the other fields if you want--but that defeats the purpose of numbering them. If, for example, you set the focus to the field named "fourth" and then hit tab you'd go to field 5 and so on through 9, then to the address bar then to tabindex 1, 2, 3, etc.
try this and see if it helps.
asc
The way to start to things off right is to use javascript with OnLoad to focus the cursor on the place you want to start (it's easiest to have this be tabindex=1, but not required, you could use any number for this--but why not start with 1?) and just make sure you have higher indexes for the other objects.
Here is a quick sample of how I get around it.
<html>
<head><title>TabIndex Test</title></head>
<Script Language="JavaScript">
function setTab()
{
document.testForm.first.focus();
}
</Script>
<body onLoad="setTab()">
<form action="" name="testForm" id="testForm">
<input type="text" id="fourth" name="fourth" size="10" tabindex="4"><br>
<input type="text" id="first" name="first" size="10" tabindex="1"><br>
<input type="text" id="fifth" name="fifth" size="10" tabindex="5"><br>
<input type="text" id="sixth" name="sixth" size="10" tabindex="6"><br>
<input type="text" id="seventh" name="seventh" size="10" tabindex="7"><br>
<input type="text" id="eighth" name="eighth" size="10" tabindex="8"><br>
<input type="text" id="second" name="second" size="10" tabindex="2"><br>
<input type="text" id="ninth" name="ninth" size="10" tabindex="9"><br>
<input type="button" name="third" id="third" value="submit" tabindex="3">
</form>
</body>
</html>
Of course you could set the focus to one of the other fields if you want--but that defeats the purpose of numbering them. If, for example, you set the focus to the field named "fourth" and then hit tab you'd go to field 5 and so on through 9, then to the address bar then to tabindex 1, 2, 3, etc.
try this and see if it helps.
asc
Replied 08 Nov 2004 12:11:01
08 Nov 2004 12:11:01 Simon Martin replied:
You could set up an access key - so that if the user presses shift and N (for instance) that will activate the link.
Access keys are good from an accessibility point of view too. I'd give some visual clue that N was the access key by underlining it. You could also do the same for <u>F</u>irst <u>P</u>revious and <u>L</u>ast
Sharing knowledge saves valuable time!
Simon
[DWMX 2004]|[SQL]|[ASP/VBScript]|[XP-Pro]
Access keys are good from an accessibility point of view too. I'd give some visual clue that N was the access key by underlining it. You could also do the same for <u>F</u>irst <u>P</u>revious and <u>L</u>ast
Sharing knowledge saves valuable time!
Simon
[DWMX 2004]|[SQL]|[ASP/VBScript]|[XP-Pro]