Question

我在使用Internet Explorer 7时遇到问题。

当我有一个两个或更多 input[type=text]的表单并按Enter键时，事件按此顺序发生：

提交按钮（onClick）
表格（onSubmit）

示例代码：

<form onSubmit="{alert('form::onSubmit'); return false;}">
    <input type="text">
    <input type="text">
    <input type="submit" onClick="{alert('button::onClick');}">
</form>

如果我只有一个 input[type=text]，请按Enter键提交按钮onClick事件不会触发。示例代码：

<form onSubmit="{alert('form::onSubmit'); return false;}">
    <input type="text">
    <input type="submit" onClick="{alert('button::onClick');}">
</form>

Answer 1

按钮的onclick应该（我认为）只有在实际点击按钮时（或当焦点在它上面且用户点击回车时）才会触发，除非你添加了逻辑来改变它。

添加额外的文本框是否可能会更改元素的Tab键顺序（在这种情况下可能使按钮成为默认控件）？

Answer 2

从浏览器开始，表单中的单个输入字段将在输入时提交，有或没有提交按钮。这是为了让人们更容易从单个搜索字段中搜索网站。

如果你需要在表单中执行一些javascript，那么使用表单的onsubmit（并返回false来停止提交）而不是在提交按钮的onClick中执行脚本是更安全的做法。如果你需要从按钮执行javascript，请使用type =“button”而不是type =“submit” - 希望这澄清了我的意思

Answer 3

如果您希望在用户按Enter键时运行代码，只需使用onSubmit处理程序。

如果您希望代码在用户按下按钮时运行，而当用户按下Enter键时不，请使用type =“submit”以外的按钮。

Answer 4

有趣的是，如果您在第二个示例中单击屏幕（从文本框中删除焦点），只有一个文本框，则事件onClick会触发......所以这不是预期的行为，因为它只发生在您只有一个文本框时和你专注于文本框我担心你在浏览器上发现了一个错误，你必须找到一个解决方法，或者在这种情况下避免使用onClick事件。
我使用onSubmit事件进行验证，因为它是一个“更安全”的事件，更有可能在不同的浏览器和情境下工作。

Answer 5

出于好奇，您使用的是DOCTYPE，如果是，那么哪一个？我并不是说与DOCTYPE的不兼容性是问题，但是在尝试其他任何事情之前要先排除怪异模式。

Answer 6

您可能希望包含一个虚拟隐藏输入元素来重新创建您有两个输入元素的情况......这样，您将获得两个事件被触发

<FORM onSubmit="{alert('form::onSubmit'); return false;}">
    <INPUT TYPE="text">
    <input type="hidden" name="dummy">
    <INPUT TYPE="submit" onClick="{alert('buttom::onClick');}">
</FORM>

IE需要做很多令人困惑的修复，以提高代码的兼容性

按Enter键时，onClick不会仅使用一个输入触发

6 个答案: