我的 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 时,我回到初始屏幕,当我点击“邮件密码”时,没有任何意外发生,但是当我点击“回车”时,浏览器会加载不同的位置,就好像执行了表单的默认操作一样。
在 fiddle 中很难看到,但在我的网站中,人们被转发到 ./?username=,这告诉我这是初始屏幕中表单中不需要的行为。如何防止这种情况发生?
最佳答案
在对话框中添加一个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();
});
关于jquery - 如何防止 jquery ui 对话框在按 Enter 键时关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5993127/