按下回车键时，仅有一个输入框时无法触发onClick事件。

Question

我在Internet Explorer 7中遇到了事件问题。

当我有一个包含两个或更多input[type=text]的表单并按下回车键时，事件按照以下顺序发生：

1. 提交按钮（onClick）
2. 表单（onSubmit）

示例代码：

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

如果我只有一个 文本输入框 ，并且按下回车键，提交按钮的 onClick 事件不会触发。示例代码：

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

- danielgs

---

这个问题解决了这个问题：在只有一个输入字段的表单上按ENTER键将自动使用GET提交。 - lawnsea

Answer 1

的onclick事件应该（我认为）只有在实际点击按钮时（或当焦点在它上面，用户点击回车键时）才会触发，除非您已经添加了更改它的逻辑。

额外文本框的添加是否可能改变您元素的制表符顺序（也许在这种情况下使按钮成为默认控件）？

- DannySmurf

Answer 2

自从浏览器问世以来，表单中的一个输入字段将在有或没有提交按钮的情况下在按下回车键时提交。这样做是为了让人们能够更简单地从单个搜索字段中搜索网站。

如果需要在表单中执行一些JavaScript代码，最好使用表单的onsubmit（并返回false以停止提交），而不是在提交按钮的onClick中执行脚本。如果需要从按钮执行JavaScript，请使用type="button"而不是type="submit"——希望这澄清了我的意思。

- mplungjan

---

我没有点踩，但是我很难解析最后一句话。（“永远不要在提交按钮的onClick事件中执行任何操作，而是总是在按钮的onClick事件中执行...”？？？） - Tim Pietzcker

Answer 3

如果您想让代码在用户按下回车键时运行，只需使用onSubmit处理程序。 如果您想让代码在用户按下按钮时运行，而不是在用户按下回车键时运行，请使用类型为“submit”以外的按钮。

- superjoe30

Answer 4

有趣的是，如果你在只有一个文本框的第二个例子中点击屏幕（将焦点从文本框中移除），onClick事件会触发...所以这不是预期的行为，因为它只会在你只有一个文本框并且你把焦点放在文本框上时才会发生。
恐怕你在浏览器上发现了一个bug，你需要找到一个解决方法或者避免在这种情况下使用onClick事件。
我使用onSubmit事件进行验证，因为它是一个“更安全”的事件，更有可能在不同的浏览器和情况下工作。

- bubbassauro

Answer 5

出于好奇，你是否使用了 DOCTYPE？如果是的话，使用的是哪个版本？我并不是说兼容性问题一定是原因，但排除 quirks 模式可能是尝试其他解决方案之前需要做的。

- Brian Warshaw

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 有很多混淆的修复需要完成，以改善我们代码的兼容性。

- Crystal Paladin