DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets Manager

Snippets has posted 5883 posts at DZone. View Full User Profile

Enter As Tab //Javascript Function

07.01.2005

| 16500 views |

        <a href="http://jsfromhell.com/forms/enter-as-tab">
Tabulation on fields through the enter key, i didnt allowed it to work on <select> and <textarea> 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>

//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();
		}
	} ) );
};



Example:

<form action="">
	<p>
	<input type="text" />
	<br /><input type="text" />
	<br /> <input type="radio" name="aaa" /> opÃ§Ã£o 1
	<input type="radio" name="aaa" checked="checked" /> opÃ§Ã£o 2
	<br /><textarea rows="3" cols="15">aaaaaa pode dar enter q ele naum pula hahah</textarea>
	<br /><select><option>opÃ§Ã£o blablablabla</option><option>opÃ§Ã£o bleblebleble</option></select>
	<br /><input type="text" />
	</p>
</form>


<script type="text/javascript">
//<![CDATA[

enterAsTab();

//]]>
</script>

Tags: