带有单个文本字段的 HTML 表单 + 防止 Internet Explorer 中的回发

Question

我注意到 IE 中有一个相当奇怪的行为。

我有一个 HTML 表单，其中有一个输入文本字段和一个提交按钮，

在单击“提交”时，我需要执行执行必要操作的客户端 JavaScript 函数。

现在，当我想阻止文本字段中的回发（按回车键时）。

我添加了一个按键 JavaScript 函数，如下所示：

<input type=text onkeypress="return OnEnterKeyPress(event)" />

 function OnEnterKeyPress(event) {
            var keyNum = 0;
            if (window.event) // IE
            {
                keyNum = event.keyCode;
            }
            else if (event.which) // Netscape/Firefox/Opera
            {
                keyNum = event.which;
            }
            else return true;  
            if (keyNum == 13) // Enter Key pressed, then start search, else do nothing.
            {
                OnButtonClick();
                return false;
            }
            else
                return true;
        }

奇怪的是，这不起作用。

---

但是如果我将文本字段传递给函数：

<input type=text onkeypress="return OnEnterKeyPress(this,event);" />

 function OnEnterKeyPress(thisForm,event) {
            var keyNum = 0;
            if (window.event) // IE
            {
                keyNum = event.keyCode;
            }
            else if (event.which) // Netscape/Firefox/Opera
            {
                keyNum = event.which;
            }
            else return true;  
            if (keyNum == 13) // Enter Key pressed, then start search, else do nothing.
            {
                OnButtonClick();
                return false;
            }
            else
                return true;
        }

我能够阻止回发。

任何人都可以确认这里到底发生了什么吗？

HTML 表单只有一个文本框和一个提交按钮。

提交时执行的 JavaScript 函数的结果输出显示在单独 div 的 HTML 文本区域中。

Answer 1

必须与您尚未发布的其他代码进行一些交互。 您的代码在两种变体中都停止了我的表单提交，并且没有理由不这样做。

但捕获 Enter 按键很难正确完成，并且可能会像其他任何事情一样令人烦恼。 几乎总有更好的方法。

例如，正如 altCognito 建议的那样，让“form.onsubmit”返回 false，以便表单永远不会提交以响应用户交互。 另外，如果您将 AJAX 代码（假设这就是您正在做的事情）放在 onsubmit 处理程序中而不是 onclick 按钮上，您也可以这样做，以便按 Enter 与单击提交按钮具有相同的效果，用户通常可能期望。

如果您不希望这样，似乎没有理由包含

根本没有元素。 如果您从不期望浏览器将输入元素提交到任何地方，那么将输入元素单独放置是完全有效的。

Answer 2

刚刚来到这里是因为至少对 IE 7 和 8 进行了相关观察：

如果表单上只有一个文本输入和一个提交按钮，并且用户按下返回键，则 IE 将不会包含提交按钮的名称/值对在请求中。 相反，只有文本输入的值会在那里。

如果我添加另一个文本输入，则会发布文本输入和提交按钮的参数。 第二个文本输入甚至可以隐藏：

所以这与事件无关，而是与事件相关到简单的表单提交。

它发生在 GET 和 POST 中。 将选择元素添加到表单不会改变行为。 - 很奇怪。

Answer 3

找到了解决此问题的方法。

我刚刚发现在 IE 中，如果在表单中只有一个文本字段和一个提交按钮，按 Enter 键会导致表单提交。 但是，如果有多个文本框，IE 不会在按下 Enter 时自动回发表单，而是会触发按钮的 onclick 事件。

因此，我在表单中引入了一个隐藏的文本字段，一切都神奇地起作用。
我什至不需要处理文本字段的 onkeypress 事件。

<Form>
    <input type="text" />
    <input type="text" style="display:none"/>
    <input type="submit" onClick="callPageMethod();return false;"/>
</Form>

这对我来说非常有效！

这在 FF 中不是问题，因为按 Enter 键会直接调用提交按钮的 onclick 事件。

Answer 4

您好，您还可以禁用默认行为。

jQuery('#yourInput').keydown(function (e) {
  if (e.keyCode == 13) {
    e.preventDefault();
  }
});

干杯!

Answer 5

在用于通过 javascript 提交表单的 onsubmit 中返回 false。