title: Moving a focus when the input text field reaches a max length
body: <p>I do have a credit card number form. The number is divided into four parts just as on a real credit card.</p>
  
  <p>I want to add a JavaScript taste to the form where when a user types four letters in a field, the focus automatically goes to the next tag. But not in the last tag. By doing this, a user doesn't have to type "tab" key to move a focus.</p>
  
  <p>It is okay to add some extra class, id or name in the tags.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
      &lt;title&gt;MoveFocus&lt;/title&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" charset="utf-8"&gt;
       $(function() {
       // some code goes here.
      });
      &lt;/script&gt;
  &lt;/head&gt;
  
  
  &lt;body&gt;
    &lt;form action="post.php" method="post" accept-charset="utf-8"&gt;
      &lt;input type="text" value="" id="first" size="4" maxlength="4"/&gt; -
      &lt;input type="text" value="" id="second" size="4" maxlength="4"/&gt; -
      &lt;input type="text" value="" id="third" size="4" maxlength="4"/&gt; -
      &lt;input type="text" value="" id="fourth" size="4" maxlength="4"/&gt;
      &lt;p&gt;&lt;input type="submit" value="Send Credit Card"&gt;&lt;/p&gt;
    &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>