jQuery: Roll to Next Input

I was looking for a way to have an input, that when you change, would roll to the next input. The project I'm working on has a page based system, so each page has its own fieldset. When the last field is completed, I wanted it to automatically roll to the next page. I also wanted functionality for zip code, and phone number fields, that would roll to the next input after 5 digits on zip, or roll to the next piece of the phone number field.

The Solution

Starting off with the binds

$( document ).on( 'keyup click', ':input.rollToNext', rollToNext );

Then, the actual function

function rollToNext( event ) {
	switch( event.type ) {
		case 'click':
			if( !$( this ).is( 'select' ) ) return false;
			break;
		case 'keyup':
			var code = event.keyCode ? event.keyCode : event.which;
			if( $( this ).is( 'select' ) && code != 13 && code != 9 ) return false;
			break;
	}

	// If the function has made it here, we should run the roll to next logic
	var fieldset = $( 'fieldset:visible' ),
		fields = fieldset.find( ':input:visible' ),
		empty = fields.filter(function() { return !$( this ).val().length } ).length;

		if( !empty && fieldset.find( ':input#form_validate' ).length == 0 ) {
			// Show the next page here (Our own custom function)
		}

		// Now for the logic that rolls to the next input on zipcode and phone
		if( $( this ).attr( 'maxlength' ) !== undefined ) {

			//Making sure it was actually a character that was typed
			var inp = String.fromCharCode( event.keyCode );
			if( !(/[a-zA-Z0-9-_ \.]/.test( inp )) ) return true;

			if( $( this ).val().length == $( this ).attr( 'maxlength' ) ) {
				$( this ).blur();

				for( var i in fields ) {
					var index = fields[ i ];
					if( typeof previous != 'undefined' ) return $( index ).focus();
					if( index == this ) var previous = index;
				}
			}
		}
}

End

Voila, your rollToNext function is there. All you need to do, is pull a rollToNext class on your input. If you need any help implementing this, hit me up in the comments.