<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Latent Motion &#187; form usability</title>
	<atom:link href="http://www.latentmotion.com/tag/form-usability/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.latentmotion.com</link>
	<description>Usability, Design and Front-Side Programming</description>
	<lastBuildDate>Tue, 27 Jul 2010 05:40:54 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Make Enter Key Tab in Forms</title>
		<link>http://www.latentmotion.com/make-enter-key-tab-in-forms/</link>
		<comments>http://www.latentmotion.com/make-enter-key-tab-in-forms/#comments</comments>
		<pubDate>Fri, 04 Sep 2009 16:00:52 +0000</pubDate>
		<dc:creator>Brett</dc:creator>
				<category><![CDATA[User Interface]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[enter]]></category>
		<category><![CDATA[enter to tab]]></category>
		<category><![CDATA[form usability]]></category>
		<category><![CDATA[forms]]></category>
		<category><![CDATA[tab]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[usability]]></category>

		<guid isPermaLink="false">http://www.latentmotion.com/?p=294</guid>
		<description><![CDATA[Sometimes, web browsers really suck. Default form behaviors are a major cause for suckage &#8211; but  good UI developers can override them. Heck, if you know how to copy and paste, you&#8217;re halfway there. I&#8217;ve patched together the following script, which converts the enter tab into a tab click when a form input is focused. [...]]]></description>
			<content:encoded><![CDATA[<p>Sometimes, web browsers really <strong>suck.</strong> Default form behaviors are a major cause for suckage &#8211; but  good UI developers can override them. Heck, if you know how to copy and paste, you&#8217;re halfway there. I&#8217;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:</p>
<pre><pre class="brush: jscript;">
&lt;script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
    $(document).ready(function(){
$(&quot;input&quot;).not( $(&quot;:button&quot;) ).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 &gt; -1 &amp;&amp; ( index + 1 ) &lt; fields.length ) {
fields.eq( index + 1 ).focus();
}
return false;
}
}
});
    });
&lt;/script&gt;
</pre></pre>
<p>If you need some html code to test it with, you can use:</p>
<pre><pre class="brush: xml;">

&lt;form id=&quot;form1&quot; name=&quot;form1&quot; method=&quot;post&quot; action=&quot;http://www.disney.com&quot;&gt;

&lt;label&gt;
&lt;input type=&quot;text&quot; name=&quot;textfield&quot; id=&quot;textfield&quot; /&gt;
&lt;/label&gt;
&lt;label&gt;
&lt;input type=&quot;text&quot; name=&quot;textfield2&quot; id=&quot;textfield2&quot; /&gt;
&lt;/label&gt;
&lt;label&gt;
&lt;input type=&quot;text&quot; name=&quot;textfield3&quot; id=&quot;textfield3&quot; /&gt;
&lt;/label&gt;

&lt;label&gt;
&lt;input type=&quot;submit&quot; name=&quot;button&quot; id=&quot;button&quot; value=&quot;Submit&quot; /&gt;
&lt;/label&gt;
&lt;/form&gt;

</pre></pre>
<p>If you&#8217;d prefer, you can try a live demo of the <a href="/downloads/enter-to-tab.html">Enter to Tab</a> on this site.</p>




	<a rel="nofollow" class="digg" target="_blank" href="javascript:window.location='http%3A%2F%2Fdigg.com%2Fsubmit%3Fphase%3D2%26amp%3Burl%3Dhttp%253A%252F%252Fwww.latentmotion.com%252Fmake-enter-key-tab-in-forms%252F%26amp%3Btitle%3DMake%2520Enter%2520Key%2520Tab%2520in%2520Forms%26amp%3Bbodytext%3DSometimes%252C%2520web%2520browsers%2520really%2520suck.%2520Default%2520form%2520behaviors%2520are%2520a%2520major%2520cause%2520for%2520suckage%2520-%2520but%25C2%25A0%2520good%2520UI%2520developers%2520can%2520override%2520them.%2520Heck%252C%2520if%2520you%2520know%2520how%2520to%2520copy%2520and%2520paste%252C%2520you%2527re%2520halfway%2520there.%2520I%2527ve%2520patched%2520together%2520the%2520following%2520script%252C%2520which%2520c';" title="Digg"><img src="http://www.latentmotion.com/wp-content/plugins/sociable/images/digg.png" title="Digg" alt="Digg" class="sociable-hovers" /></a>
	<a rel="nofollow" class="sphinn" target="_blank" href="javascript:window.location='http%3A%2F%2Fsphinn.com%2Findex.php%3Fc%3Dpost%26m%3Dsubmit%26link%3Dhttp%253A%252F%252Fwww.latentmotion.com%252Fmake-enter-key-tab-in-forms%252F';" title="Sphinn"><img src="http://www.latentmotion.com/wp-content/plugins/sociable/images/sphinn.png" title="Sphinn" alt="Sphinn" class="sociable-hovers" /></a>
	<a rel="nofollow" class="del.icio.us" target="_blank" href="javascript:window.location='http%3A%2F%2Fdelicious.com%2Fpost%3Furl%3Dhttp%253A%252F%252Fwww.latentmotion.com%252Fmake-enter-key-tab-in-forms%252F%26amp%3Btitle%3DMake%2520Enter%2520Key%2520Tab%2520in%2520Forms%26amp%3Bnotes%3DSometimes%252C%2520web%2520browsers%2520really%2520suck.%2520Default%2520form%2520behaviors%2520are%2520a%2520major%2520cause%2520for%2520suckage%2520-%2520but%25C2%25A0%2520good%2520UI%2520developers%2520can%2520override%2520them.%2520Heck%252C%2520if%2520you%2520know%2520how%2520to%2520copy%2520and%2520paste%252C%2520you%2527re%2520halfway%2520there.%2520I%2527ve%2520patched%2520together%2520the%2520following%2520script%252C%2520which%2520c';" title="del.icio.us"><img src="http://www.latentmotion.com/wp-content/plugins/sociable/images/delicious.png" title="del.icio.us" alt="del.icio.us" class="sociable-hovers" /></a>
	<a rel="nofollow" class="rss" target="_blank" href="javascript:window.location='http%3A%2F%2Fwww.latentmotion.com%2Ffeed%2F';" title="RSS"><img src="http://www.latentmotion.com/wp-content/plugins/sociable/images/rss.png" title="RSS" alt="RSS" class="sociable-hovers" /></a>
	<a rel="nofollow" class="twitter" target="_blank" href="javascript:window.location='http%3A%2F%2Ftwitter.com%2Fhome%3Fstatus%3DMake%2520Enter%2520Key%2520Tab%2520in%2520Forms%2520-%2520http%253A%252F%252Fwww.latentmotion.com%252Fmake-enter-key-tab-in-forms%252F';" title="Twitter"><img src="http://www.latentmotion.com/wp-content/plugins/sociable/images/twitter.png" title="Twitter" alt="Twitter" class="sociable-hovers" /></a>


<br/><br/>]]></content:encoded>
			<wfw:commentRss>http://www.latentmotion.com/make-enter-key-tab-in-forms/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
