Auto tab text form fields with jQuery

Problem

Need to auto tab to the next form field when the maximum number of entered  characters is reached.

Solution

Assigned [maxlenght] attribute and [autotab] class to each field you want to auto tab. Add the following code to $(document).ready event:

$('.autotab').keydown(function(event) {
    //save previously entered value prior to keyup event
    $(this).attr('prevValue', $(this).val());
});
 
$('.autotab').keyup(function(event) {
    var newValue = $(this).val();
    //see if the textbox had its value changed
    if ($(this).attr('prevValue') != newValue) {
        //see if the number of entered characters is equal or greater
        //than the allowable maxlength
        if (newValue.length >= $(this).attr('maxlength')) {
            //set focus on the next field with autotab class
            $(this).next('.autotab').focus();
        }
        //save newly entered value for the next execution of this event
        $(this).attr('prevValue', newValue)
    }
});

Hopefully, my comments in the above code is enough to understand how it works.

18 May 2010 in jQuery

Leave a comment