Unable to move between textboxes using the arrow keys
<p>I'm having a bit of trouble with my javascript and was hoping you could help.</p>

<p>I'm using an example from here: <a href="http://www.knowlbase.in/2012/01/traverse-cursor-through-text-box-with.html" rel="nofollow">http://www.knowlbase.in/2012/01/traverse-cursor-through-text-box-with.html</a> to move between textboxes on a page. Left and Right works great but up and down moves the cursor diagonally to right (it does however move diagonally up when the up key is pressed and diagonally down when the down key is pressed).</p>

<p>Can anyone see where I am going wrong?</p>

<p>Edit- adding <a href="http://jsfiddle.net/LYU76/" rel="nofollow">jsFiddle</a> </p>

<p>This is what I've got:</p>

<pre><code>function arrowKeyPressed() {
$('input').keyup(function (e) {
    if (e.which == 39)
        $(this).closest('td').next().find('input').focus();
    else if (e.which == 37)
        $(this).closest('td').prev().find('input').focus();
    else if (e.which == 40)
        $(this).closest('tr').next().find('td:eq(' + $(this).closest('td').index() + ')').find('input').focus();
    else if (e.which == 38)
        $(this).closest('tr').prev().find('td:eq(' + $(this).closest('td').index() + ')').find('input').focus();
});
};
</code></pre>

<p>and this is how I add my textbox attribute (all the textboxes are created programitically):</p>

<pre><code>tb.Attributes.Add("onkeyup", "arrowKeyPressed()");
</code></pre>

<p>Here's what the HTML looks like when generated(this is only one textbox; all of the others are identical, with the exception of the tab index):</p>

<pre><code>&lt;input name="ctl00$MainContent$addPrices$Textbox101"
type="text"id="ctl00_MainContent_addPrices_Textbox101" tabindex="13" 
onblur="validateText('ctl00_MainContent_addPrices_Textbox101', 
'ctl00_MainContent_addPrices_AddQuote', 'ctl00_MainContent_addPrices_msgLbl')" 
style="width:60px;"&gt; 
</code></pre>

<p>Any ideas?</p>

<p>Thanks!</p>
