title: Cross-browser issues with an html form crossword puzzle
body: <p>I'm building a small web based crossword puzzle for kids. My idea is to have one character wide input text fields for each letter. After inputting one character, the browser should automatically jump the next text field.</p>
  
  <p>Thanks to a lot of answers on this site, I was able to get jQuery .next() to travel my DOM the way I want, so thanks for all the contributors!</p>
  
  <p>As this is for kids, some of the letters are pre-filled. To make inputting text easier for the users, I'm selecting the form field prior the input. Also, after the keypress the next field is focused and selected. I'm using "keypress" instead of "keyup" as I read it would make this more iPad friendly.</p>
  
  <p>The code I have so far is</p>
  
  <pre><code>$( document ).ready(function() {
      $( "input:text" ).attr( "maxlength", 1 );
      $( "input:text" ).keypress( function( event ) {
          $nextField = $( this ).parent().next().children('input:text');
          $nextField.focus();
          $nextField.select();
      });
      $( "input:text" ).click(function( event ) {
          $( this ).select();
      });
  });
  </code></pre>
  
  <p>This seems to work nicely in Firefox, but in Chrome the pre-filled letters come out as empty form fields after entering a letter. In IE the next field is selected prior to the char being entered, thus the next field is filled, not the one clicked.</p>
  
  <p>Here is my <a href="http://jsfiddle.net/hHQWK/1/" rel="nofollow">jsfiddle example</a></p>
  
  <p>Am I doing this wrong, or are there cross browser issues in jQuery regarding this?</p>
  
  <p>Maybe I should ditch the form elements altogether and go for a div based solution...</p>