JavaScript OnBlur 事件阻止提交 HTML 表单

Posted 2023-02-22

【中文标题】JavaScript OnBlur 事件阻止提交 HTML 表单

【英文标题】：JavaScript OnBlur event prevents HTML form from being submitted

【发布时间】：2010-10-19 01:47:57

【问题描述】：

考虑以下形式：

<form action="/a" method="post"> 
    <input name="x" type="text" onblur="myonblur(e)" />
    <input name="y" type="text" />
    <input name="submit" type="submit" value="Submit" />
</form>

当焦点位于名称为“x”的元素上并且用户按下提交按钮时，onblur 事件会触发，但不会提交表单。如果我的表单中有onblur events，有什么方法可以让提交按钮按预期工作？

【参考方案1】：

尝试添加

return true;

在调用你的 onBlur 函数之后。您面临的问题可能是由于事件处理程序的“返回错误”预防。

【讨论】：

没有。第一个答案是正确的。我试过你的方法，但没有帮助。

好的。不过这只是一种可能性；）

【参考方案2】：

考虑优化您的onBlur() 方法，以减少运行时间。如果您的表单被阻止提交，可能是因为onBlur() 太长而导致浏览器无法执行任何其他操作。

您也可以使用onChange() 方法代替onBlur()。这可能更适合您。

【讨论】：

感谢您的回答。想法是通过 AJAX 调用检查用户名是否存在，因此如果可能的话，使用 onChange() 会更难实现。所以，你的意思是，我没有办法使用 onBlur()？

您应该使用在后台运行的异步 AJAX 请求并且不要挂起浏览器。通过使用这些，即使 ajax 请求没有完成，onSubmit 仍然可以工作。 Jquery 库默认是异步的，看看docs.jquery.com/Ajax/jQuery.ajax