2

我注意到 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 文本区域中。

4

5 回答 5

8

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

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

所以我在表单中引入了一个隐藏的文本字段，一切都很神奇。我什至不需要处理文本字段的 onkeypress 事件。

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

这对我来说非常有效！

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

于 2009-04-17T02:22:09.713 回答
1

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

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

干杯!

于 2010-07-22T21:34:57.577 回答
0

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

于 2009-04-16T14:53:36.277 回答
0

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

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

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

如果您不希望这样，似乎根本没有理由包含 <form> 元素。如果您从不期望浏览器将它们提交到任何地方，那么仅将输入元素单独放置是完全有效的。

于 2009-04-16T15:40:37.853 回答
0

刚刚来到这里是因为至少有 IE 7 和 8 的相关观察：

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

如果我添加另一个文本输入，则会发布文本输入和提交按钮的参数。第二个文本输入甚至可以隐藏：<input type="text" style="display:none"/>

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

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

于 2010-06-03T14:00:17.120 回答