HTML tabindex problem
I am stuck with a tabindex problem here. As you can see in the HTML mock up, I have four buttons namely "Add", "Subtract", "Save" and "Close". When user Hits the Tab key, the flow starts correctly from Add-> Subtract-> Save-> Close, but after Close if user hits the Tab key again, the focus goes to the TD TAG with comment "Jumping Here". What I want it to do is to go to Add button instead. I tried giving all Buttons a tabindex of 1, 2, 3, 4 then I tried giving eve开发者_JAVA技巧ry button an index of 1 and rest of the places as -1 but that didnt solve the problem either. How do I solve this issue?
http://jsfiddle.net/t3ch/aNxjy/
Pretty sure this is not possible. Just because you have a form with tabindex values, it doesn't mean those are the only elements that will receive focus. Even browser components, like the address bar, will receive focus at some point. The browser will use the tabindex you specify, but after that tabbing will cycle through everything else.
I don't like this idea but a way you could achieve this is registering an onblur event for the Close Button, then set the focus to what ever control you wanted...
This does work....
function resetFocusIndex(){
var obj = document.getElementsByName('addIt');
if(obj[0])
obj[0].focus();
}
<INPUT TYPE="button" tabindex = "1" VALUE="Close" NAME="closeIt" onblur="resetFocusIndex()">
UPDATE
<html>
<head>
<script>
function resetFocusIndex(){
var obj = document.getElementsByName('addIt');
if(obj){
obj[0].focus();
}
}
</script>
</head>
<body>
<TABLE WIDTH=95%>
<TR>
<TD><INPUT TYPE="button" tabindex = "1" id="test2" VALUE="Add" NAME="addIt"></TD>
<TD><INPUT TYPE="button" tabindex = "1" VALUE="Subtract" NAME="minusIt"></TD>
<TD> </TD>
</TR>
</TABLE>
<DIV>
<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="1">
<TD> </TD>
<TD>First</TD>
<TD>Second</TD>
<TD>Third</TD>
<TD>Fourth</TD>
<TR>
<!-- Jumping Here --> <TD><INPUT TYPE="radio" NAME="selected" tabindex = "-1" VALUE=""></TD>
<TD><INPUT TYPE="text" tabindex="-1" NAME="" VALUE="" disabled></TD>
<TD ></TD>
<TD><INPUT TYPE="text" tabindex="-1" NAME="" VALUE="" disabled> </TD>
<TD><INPUT TYPE="text" tabindex="-1" NAME="" VALUE="" disabled> </TD>
<INPUT TYPE="hidden" NAME="" VALUE="">
<INPUT TYPE="hidden" NAME="" VALUE=""></TD>
</TR>
</TABLE>
</DIV>
<TABLE>
<TR>
<TD><A HREF="#" tabindex="-1">Click Here!</A></TD>
</TR>
<TR><TD> </TD></TR>
<TR>
<TD>
<INPUT TYPE="button" tabindex = "1" VALUE="Save" NAME="saveIt">
<INPUT TYPE="button" tabindex = "1" VALUE="Close" id="test" NAME="closeIt" onblur="resetFocusIndex()">
</TD>
</TR>
</TABLE>
</body>
</html>
Don't do this it's an awful idea.
Have focusable items (eg input) preceding the first and following the last button in tab order. Hide them (eg by positioning them off the side of the page with position: absolute; left: -1000px;). When they get a focus event, move focus to the button at the other end of the tab order.
Don't do this it's an awful idea. Really.
First you need 'id's for the buttons, that's always good.
Then you need to set two handlers; one on the last to tab to first, and one on the first button to shif+tab to the last.
See this: http://jsfiddle.net/aNxjy/11/.
I used jquery, but you can accomplish this with regular js as well. Just that you'll have to do cross-browser compatibility.
Further to gmcalab's answer instead of getElementsByName you could use getElementById
var obj = document.getElementById('test2');
if(obj){
obj.focus();
}
or possibly:
var obj = document.getElementById('test2');
if(obj){
obj.select();
}
加载中,请稍侯......
精彩评论