Unable to move between textboxes using the arrow keys

Question

I'm having a bit of trouble with my javascript and was hoping you could help.

I'm using an example from here: http://www.knowlbase.in/2012/01/traverse-cursor-through-text-box-with.html 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).

Can anyone see where I am going wrong?

Edit- adding jsFiddle

This is what I've got:

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();
});
};

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

tb.Attributes.Add("onkeyup", "arrowKeyPressed()");

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):

<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;"> 

Any ideas?

Thanks!

Answer 1

Use jQuery . I mean, use this function in $(document).ready(function(){});

$(document).ready(function () {
    $('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();
    });
});

Answer 2

Your invalid HTML is the problem here. <th /> are only allowed in an <thead /> element. So if you replace the <th /> tags for the first column with <td /> it works fine.

<tr>
    <td>2013 04 Apr</td>
    <td>
        <input style="width:60px;">
    </td>
    <td>
        <input style="width:60px;">
    </td>
    <td>
        <input style="width:60px;">
    </td>
    <td>
        <input style="width:60px;">
    </td>
    <td>
        <input style="width:60px;">
    </td>
    <td></td>
</tr>
<!-- ... -->

updated fiddle

Edit
The reason for the "wrong" behaviour is the <th /> but for completeness I will elaborate the why a little bit more.

$(this).closest('td').index()

This determines the index of the <td /> in the row (including the <th /> ). This index you're using for building a selector which looks only for <td /> elements.

'td:eq(' + $(this).closest('td').index() + ')'

So you are "missing" the first column ( <th /> ).