Keyup event handler that focuses on next element loses just-entered charater if typing too fast
<p>I have a web page with 16 textboxes arranged in a 4x4 grid. The idea is that a user will type precisely one character into each textbox (specifically, a letter). You can see this page online at <a href="http://fuzzylogicinc.net/Boggle/EnterBoardClientSide.aspx" rel="nofollow">http://fuzzylogicinc.net/Boggle/EnterBoardClientSide.aspx</a></p>

<p>What I want to happen is the following:</p>

<ul>
<li>When the page loads the upper left textbox is focused</li>
<li>Typing a letter in the textbox should enter that letter and then automatically set focus to the next textbox in the grid</li>
<li>If the user selects a textbox (either via the mouse or by Shift-Tabbing back to a previous textbox) the entry in the textbox should be selected so that they can just type the new letter to overwrite the old one.</li>
</ul>

<p>I've got this working for the most part, but have one vexing problem - namely, if a user types the letters too fast, some textboxes are left empty, as if the code that whisks the user to the next textbox occurs before the browser has a chance to actually commit the letter to the textbox that had focus (if that makes any sense). If you visit my live demo and start typing at a decent rate, you'll see that some textboxes are left blank.</p>

<p>My JavaScript, which can be seen it its entirety <a href="http://fuzzylogicinc.net/Boggle/Scripts/BoggleScriptAJax.js" rel="nofollow">here</a>, has the following code for selecting/focusing/moving to the next textbox:</p>

<pre><code>$("input.BoggleGridCell")
    .focus(function () {
        $(this).select();
    })
    .keyup(function (event) {
        var code = (event.keyCode ? event.keyCode : event.which);

        if ((code &gt;= 65 &amp;&amp; code &lt;= 90) || (code &gt;= 97 &amp;&amp; code &lt;= 122)) {
            var currentId = $(this).attr('id');

            var leftDigit = currentId.substring(1, 2);
            var rightDigit = currentId.substring(2, 3);
            if (leftDigit != 3 || rightDigit != 3) {
                if (rightDigit == 3) {
                    rightDigit = 0;
                    leftDigit++;
                }
                else {
                    rightDigit++;
                }

                var moveToId = 'c' + leftDigit + rightDigit;
                var newCell = document.getElementById(moveToId);
                if (newCell)
                    newCell.focus();
            }
            else {
                $("#solve").focus();
            }
        }
    });
</code></pre>

<p>Note that all my textboxes in the grid have a CSS class of <code>BoggleGridCell</code>. Each textbox in the grid has an <code>id</code> of the form <code>cXY</code>, where X is the row number and Y is the column number. I have a bit of code in the <code>keyup</code> event handler that examines this X and Y value of the current textbox's <code>id</code> to determine the next textbox to focus.</p>

<p>What's going on here? My intuition is that when typing at a sufficient pace that the <code>keyup</code> event for the first key press hasn't completed by the time the <code>keyup</code> event for the subsequent key press is raised.</p>

<p>Thanks!</p>
