使用JavaScript从Listview中的一个控件移动到另一个控件

Question

I have 4 textbox's in an asp Listview. I have added the Javascript below to allow me to be able to use the arrow keys to move from one tb to another. The problem that I am having is that when I am at Textbox1 I CAN use the left arrow key to move to Textbox4, however I CAN NOT use the right arrow key to move from Textbox4 to Textbox1. See the image for reference.

4 Textbox's

<script type="text/javascript">
    $('input[type="text"],textarea').keydown(function (e) {
        var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;

        if (key == 39) {
            e.preventDefault();
            var inputs = $(this).parents('form').find(':input[type="text"]:enabled:visible:not("disabled"),textarea');

            inputs.eq(inputs.index(this) + 1).focus();
            inputs.eq(inputs.index(this) + 1).click();
        }

        if (key == 37) {
            e.preventDefault();
            var inputs = $(this).parents('form').find(':input[type="text"]:enabled:visible:not("disabled"),textarea');

            inputs.eq(inputs.index(this) - 1).focus();
            inputs.eq(inputs.index(this) - 1).click();
        }
    });
</script>

Answer 1

I would wrap the 4 TextBoxes in an element and bind the left and right clicks to that elements TextBoxes. Then use the jQuery prevAll and nextAll .

<div id="4TextBox">
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
    <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
</div>

<script type="text/javascript">
    $('#4TextBox input[type="text"]').keydown(function (e) {
        var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;

        if (key == 39) {
            e.preventDefault();
            $(this).nextAll('input[type="text"]').first().focus();
        }

        if (key == 37) {
            e.preventDefault();
            $(this).prevAll('input[type="text"]').first().focus();
        }
    });
</script>

However this only works if the TextBoxes are all next to each other. If you would wrap the TextBoxes with some other element like the sample below. It will skip the 3rd TextBox. So depending on your html design you may need to tweak it some more.

<div id="4TextBox">
    <asp:TextBox ID="TextBox1a" runat="server"></asp:TextBox>      
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    <p><asp:TextBox ID="TextBox3" runat="server"></asp:TextBox></p>
    <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
</div>