如何防止jquery ui对话框在按enter键时关闭

Question

我的HTML定义如下：

忘记密码

<div id='dialog-form-lostpass' title='password recovery' class='hidden lsdialog'>
    <p id='explain'>Please enter your username or email address. We will then immediately mail your
        password to your registered email address</p>
    <p id='progress'></p>
    <form>
        <fieldset>
            <label for='username'>username or email</label><br />
            <input type='text' name='username' id='username' class='text ui-widget-content ui-corner-all' /><br />
        </fieldset>
    </form>
</div>

脚本：

 $(document).ready(function() {
    $(":button#forgotpassword").click(function() { //* open dialog to retreive user's password
        $("#dialog-form-lostpass").find("p[id=progress]").text(null); //* reset progress
        $("#dialog-form-lostpass").dialog("open");
        return false;
    });

    $("#dialog-form-lostpass").dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            "mail password": function() {
                $("#dialog-form-lostpass").find("p[id=progress]").html("<img src='images/wait.gif' height=10>Contacting Linkshelf Server...");

                $.post(options.engine, {
                    command: "retreivepassword",
                    username: $("#dialog-form-lostpass").find("input[id=username]").val(),
                }, function(data) {
                    if (data.success) {
                        $("#dialog-form-lostpass").dialog("close");
                        $("#loginscreen").find("p[id=progress]").text("Your password is sent to your registered email address. You should receive an email from us soon. Make sure there is no spam-filter blocking our email.").addClass("ui-state-error").removeClass("ui-state-error", 1700);
                    } else {
                        if (data.feedback == "invalid entry") {
                            $("dialog-form-lostpass").find("p[id=progress]").text("Invalid entry. You didn't provide us with enough information to retreive your password").addClass("ui-state-error").removeClass("ui-state-error", 1700);
                        } else {
                            $("#dialog-form-lostpass").find("p[id=progress]").text("Unknown username and/or email address. We can not retreive your password").addClass("ui-state-error").removeClass("ui-state-error", 1700);
                        }
                    }
                }, "json");
            }
        },
    });

});

现在，当我点击“忘记密码”按钮时，我会看到一个对话框(在this fiddle上检查一下，布局看起来很糟糕，但你会明白的)。当我点击ESC时，我返回到初始屏幕，当我点击“mail password”时，没有意外发生，但当我点击"enter“时，浏览器加载了一个不同的位置，就像执行了表单的默认操作一样。

在小提琴中很难看到，但在我的站点中，人们被转发到./?username=，这告诉我这是来自初始屏幕中的表单的不受欢迎的行为。我如何才能防止这种情况发生？

Answer 1

在对话框窗体中添加一个id：

<form id="passwordform">
        <fieldset>
            <label for='username'>username or email</label><br />
            <input type='text' name='username' id='username' class='text ui-widget-content ui-corner-all' /><br />
        </fieldset>
    </form>

然后告诉jQuery阻止它提交，因为对话框会这样做：

$('#passwordform').submit( function(e) {
     e.preventDefault();
});

Answer 2

您的对话框正在关闭，因为当按enter键时，表单正在提交，从而重新刷新页面。要停止此操作，您可以添加如下内容。

$('form').submit(function(e){
    return false;
});

Answer 3

首先，你需要在表单中有一个提交按钮，否则按回车键不会提交它(你可以放一个隐藏的提交按钮--应该也可以)。

在那之后，你可以放一个onsubmit="jsProcessFunctionHere(); return false"。

这样，按回车键将触发密码重置过程，而不是关闭对话框。