DZone Snippets: tabulation code

Auto Tab //JavaScript Function

jonasraoni (Jonas Raoni Soares Silva) — Fri, 09 Sep 2005 05:11:24 GMT

Auto tabulation of text inputs with maxlength setted

Usage: just add the code on the end of your page or call it on the onload event (worse solution) and "the enter tabulation" will be added for all fields enclosed by the

tag.

[UPDATED CODE AND HELP CAN BE FOUND HERE]

@REQUIRES Event-Listener



//Requires http://www.jsfromhell.com/Geral/event-listener



//+ Jonas Raoni Soares Silva

//@ http://jsfromhell.com/forms/auto-tab [v1.0]



autoTab = function(){

	for( var d, f = ( d = document ).forms, i = f.length; i; addEventListener( f[--i], "keyup", function( e ){

		var el, k = String.fromCharCode( e.key ), l = ( e = e.target ).value.length;

		if ( l >= ( e.getAttribute( "maxlength" ) || l + 1 ) && /[\wÀ-ÿ ]/.test( k ) ){

			for( l = k = ( el = e.form.elements ).length; el[--k] != e; );

			while( !(e = el[ k = ++k * ( k < l ) ]).type || e.disabled );

			e.focus();

		}

	} ) );

};

Enter as tab //Javascript Function

jonasraoni (Jonas Raoni Soares Silva) — Sat, 02 Jul 2005 02:43:56 GMT

Tabulation on fields through the enter key, i didnt allowed it to work on

since the enter is required to use this fields, so find a nice place to use it :]
 
 Usage: just add the code on the end of your page or call it on the onload event (worse solution) and "the enter tabulation" will be added for all fields enclosed by the <form> tag.
 
 [UPDATED CODE AND HELP CAN BE FOUND HERE]
 </a>
 
 @REQUIRES <a href="http://jsfromhell.com/geral/event-listener">Event-Listener</a>
 
 <code>
 //Requires http://jsfromhell.com/geral/event-listener
 
 //+ Jonas Raoni Soares Silva
 //@ http://jsfromhell.com/forms/enter-as-tab [v1.0]
 
 enterAsTab = function(){
 	for( var f, i = ( f = document.forms ).length; i; addEventListener( f[--i], "keypress", function( evt ){
 		var el, l, k = evt.key == 13, e = evt.target;
 		if( k && !/textarea|select/i.test( e.type ) && !evt.preventDefault() ){
 			for( l = k = ( el = e.form.elements ).length; el[--k] != e; );
 			while( !(e = el[ k = ++k * ( k < l ) ]).type || e.disabled );
 			e.focus();
 		}
 	} ) );
 };
 </code>
 
 
 Example:
 
 <code>
 <form action="">
 	
 	<input type="text" />
 	 <input type="text" />
 	 <input type="radio" name="aaa" /> opção 1
 	<input type="radio" name="aaa" checked="checked" /> opção 2
 	 <textarea rows="3" cols="15">aaaaaa pode dar enter q ele naum pula hahah