Make Enter Key Tab in Forms

Sometimes, web browsers really suck. Default form behaviors are a major cause for suckage – but  good UI developers can override them. Heck, if you know how to copy and paste, you’re halfway there. I’ve patched together the following script, which converts the enter tab into a tab click when a form input is focused. Try it for yourself by copying it into the header of your page:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type="text/javascript">
    $(document).ready(function(){
$("input").not( $(":button") ).keypress(function (evt) {
if (evt.keyCode == 13) {
iname = $(this).val();
if (iname !== 'Submit'){
var fields = $(this).parents('form:eq(0),body').find('button, input, textarea, select');
var index = fields.index( this );
if ( index > -1 && ( index + 1 ) < fields.length ) {
fields.eq( index + 1 ).focus();
}
return false;
}
}
});
    });
</script>

If you need some html code to test it with, you can use:

<form id="form1" name="form1" method="post" action="http://www.disney.com">

<label>
<input type="text" name="textfield" id="textfield" />
</label>
<label>
<input type="text" name="textfield2" id="textfield2" />
</label>
<label>
<input type="text" name="textfield3" id="textfield3" />
</label>

<label>
<input type="submit" name="button" id="button" value="Submit" />
</label>
</form>

If you’d prefer, you can try a live demo of the Enter to Tab on this site.