Jquery 回车移到下一个输入框

 在asp.net表单中通过Jquery实现按回车自动移动到下一个文本框。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Chapter 1 - Recipe 2: Auto focus on the first textbox and tab on enter key
    </title>
    <script type="text/javascript" src="js/jquery-1.4.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('input:text:first').focus();
            $('input:text').bind("keydown", function (e) {
                if (e.which == 13) {   //Enter key
                    e.preventDefault(); //to skip default behaviour of enter key
                    var nextinput = $('input:text')[$('input:text').index(this) + 1];
                    if (nextinput != undefined) {
                        nextinput.focus();
                    } else {
                        alert("没有下一个输入框！");
                    }
                }
            });

            $('#btnReset').click(
                 function () {
                     $('form')[0].reset();
                 });

        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div align="center">
        <fieldset style="width: 400px; height: 200px;">
            <table cellpadding="3" cellspacing="3" border="0">
                <tr>
                    <td>
                        <asp:Label ID="lblName" Text="Name: " runat="server"></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtName" Width="200px" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="lblAddress" Text="Address: " runat="server"></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtAddress" Width="200px" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="lblContact" Text="Contact Number: " runat="server"></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtContact" Width="200px" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="lblEmail" Text="Email: " runat="server"></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtEmail" Width="200px" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                        <asp:Button ID="btnSubmit" Text="SUBMIT" runat="server" />
                        <asp:Button ID="btnReset" Text="RESET" runat="server" />
                    </td>
                </tr>
            </table>
        </fieldset>
    </div>
    </form>
</body>
</html>

 

posted @ 2013-05-23 16:31  rdzzg  阅读(2276)  评论(2)  编辑  收藏  举报