Question

我在javascript中有一个脚本，用 TAB 键替换 Enter ：

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

您忘记取消事件传播，将return false添加到keydown回调：

$(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

用jQuery中的TAB键代码替换输入键码

2 个答案: