I think that some well planned auto-tabbing on a web form can really make a page feel polished.
Suppose we have some lovely aspx markup like this:
<form id="aspnet_form" runat="server">
<label>Social Security Number:</label>
<asp:TextBox ID="PartOne" MaxLength="3" runat="server" />-
<asp:TextBox ID="PartTwo" MaxLength="2" runat="server" />-
<asp:TextBox ID="PartThree" MaxLength="4" runat="server" />
</form>
It would really be nice if the user didn't have to hit tab between these obviously related textboxes. The JavaScript snippet below can be used to easily enable auto-tabbing in your webforms.
Usage:
<script type="text/javascript">
$(document).ready(function() {
WireAutoTab('<%= PartOne.ClientID %>',
'<%= PartTwo.ClientID %>', 3);
WireAutoTab('<%= PartTwo.ClientID %>',
'<%= PartThree.ClientID %>', 2);
});
</script>
The code:
///<summary>
/// Wires an element's OnKeyUp event to move focus to the next element
/// once a certain number of chacaters have been entered.
///</summary>
///<param name="CurrentElementID">The client ID of the element to tab
/// from.</param>
///<param name="NextElementID">The client ID of the element to tab
/// to.</param>
///<param name="FieldLength">The number of characters that should be
/// allowed before tabbing away from the field.</param>
function WireAutoTab(CurrentElementID, NextElementID, FieldLength) {
//Get a reference to the two elements in the tab sequence.
var CurrentElement = $('#' + CurrentElementID);
var NextElement = $('#' + NextElementID);
CurrentElement.keyup(function(e) {
//Retrieve which key was pressed.
var KeyID = (window.event) ? event.keyCode : e.keyCode;
//If the user has filled the textbox to the given length and
//the user just pressed a number or letter, then move the
//cursor to the next element in the tab sequence.
if (CurrentElement.val().length >= FieldLength
&& ((KeyID >= 48 && KeyID <= 90) ||
(KeyID >= 96 && KeyID <= 105)))
NextElement.focus();
});
}