Simulate Shift+Tab and Tab with only the elements on your web page.
By Ken Fitzpatrick
When writing web pages, it is nice to be able to use tab and shift+tab to move around the elements on the page. Unfortunately, these when you hit the end of the tabindex, the url bar and other browser elements get selected. This code will help you confine the shift+tab and tab keystrokes to your web page. This has only been tested with IE. If you understand the code, it should be easy to port to other browsers.
<script type="text/JavaScript">
function
tab(prev, next) {
var obj;
if
(event.keyCode == 9 && event.shiftKey == true)
obj
= document.getElementById(prev);
if
(event.keyCode == 9 && event.shiftKey == false)
obj
= document.getElementById(next);
if
(event.keyCode == 37)
obj
= document.getElementById(prev);
if
(event.keyCode == 39)
obj
= document.getElementById(next);
if
(obj != undefined) {
obj.onfocus
= function() {
obj.select();
};
obj.focus();
}
event.returnValue
= false;
}
</script>
<!--
Call the tab function in the onKeyDown event. -->
<!-- Pass in the
ID of the previous and next elements -->
<asp:TextBox ID="textbox1"
Text="Test1" onKeydown="return tab('textbox3', 'textbox2');"
runat="server"></asp:TextBox>
<asp:TextBox ID="textbox2"
Text="Test2" onKeydown="return tab('textbox1', 'textbox3');"
runat="server"></asp:TextBox>
<asp:TextBox ID="textbox3"
Text="Test3" onKeydown="return tab('textbox2', 'textbox1');"
runat="server"></asp:TextBox>
Simulate Shift+Tab and Tab with only the elements on your web page. (437 Views)