用 jQuery 中的 TAB 键代码替换 Enter 键代码

Question

我有一个用 TAB 键替换 Enter 的 javascript 脚本：

function ReplaceEnterWithTab() { if (event.keyCode == 13) event.keyCode = 9; return false; }

我是这样使用的：

txt.Attributes.Add("OnKeyDown", "ReplaceEnterWithTab();");

这段代码很好用。现在我想用jQuery开发一个不需要添加OnKeyDown属性的脚本。请考虑这个示例页面：

<form id="form1" runat="server">
<div>
    <asp:TextBox ID="TextBox1" runat="server" CssClass="EntTab"></asp:TextBox>
    <br />
    <br />
    <asp:TextBox ID="TextBox2" runat="server" CssClass="EntTab"></asp:TextBox>
    <br />
    <br />
    <asp:DropDownList ID="DropDownList1" runat="server" CssClass="EntTab">
        <asp:ListItem>1</asp:ListItem>
        <asp:ListItem>2</asp:ListItem>
    </asp:DropDownList>
    <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</div>
</form>

我写了这段代码：

$(document).ready(function () {

        $('.EntTab').on('keydown', function (e) {
            if (e.keyCode == 13) e.keyCode = 9;
        });

    });

问题是当我按下TextBox1 上的Enter 键时，Button1 会导致页面回发。我该如何解决这个问题？

谢谢

Answer 1

试试：

$(document).ready(function () {
    $(".EntTab").bind("keypress", function(e) {

        if (e.keyCode == 13) {
            var inps = $("input, select"); //add select too
            for (var x = 0; x < inps.length; x++) {
                if (inps[x] == this) {
                    while ((inps[x]).name == (inps[x + 1]).name) {
                    x++;
                    }
                    if ((x + 1) < inps.length) $(inps[x + 1]).focus();
                }
            }   e.preventDefault();
        }
    });
});

你的意思是这样的吗？

Answer 2

你忘了取消事件传播，在keydown回调中添加return false：

$(document).ready(function () {
    $('.EntTab').on('keydown', function (e) {
        if (e.keyCode == 13) e.keyCode = 9;
        return false;
    });
});

此外，ASP.NET 中的 Button 标记默认具有 UseSubmitBehavior flag set to true，这会导致按钮呈现为 input type="submit" 标记。尝试将其设置为 false，以获得以下答案中描述的行为：Use Javascript to change which submit is activated on enter key press