为什么单输入字段的表单在输入中按回车键后会提交

发布于 2024-08-03 21:03:01 字数 1084 浏览 8 评论 0原文

为什么当用户输入值并按 Enter 字段的

会重新加载表单kbd>，如果中有 2 个或更多字段，则不会。

我写了一个简单页面来测试这个奇怪的现象。

如果您在第二个表单中输入一个值并按 Enter，您将看到它重新加载页面并传递输入的值，就像您调用 GET 一样。为什么？我该如何避免它？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>testFormEnter</title>
</head>
<body>
<form>
  <input type="text" name="partid2" id="partid2" />
  <input type="text" name="partdesc" id="partdesc"  />
</form>
  <p>2 field form works fine</p>
<form>
<input type="text" name="partid" id="partid"  />
</form>
<p>One field form reloads page when you press the Enter key why</p>
</body>
</html>

原文

Why is it that a <form> with a single <input> field will reload the form when the user enters a value and presses the Enter, and it does not if there are 2 or more fields in the <form>?.

I wrote a simple page to test this oddity.

If you enter a value in the second form and press Enter, you'll see it reloads the page passing the entered value as if you called GET. why? and how do I avoid it?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>testFormEnter</title>
</head>
<body>
<form>
  <input type="text" name="partid2" id="partid2" />
  <input type="text" name="partdesc" id="partdesc"  />
</form>
  <p>2 field form works fine</p>
<form>
<input type="text" name="partid" id="partid"  />
</form>
<p>One field form reloads page when you press the Enter key why</p>
</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

安静 2024-08-10 21:03:01

这是一个鲜为人知的“怪癖”，已经出现了一段时间了。我知道有些人已经通过各种方式解决了这个问题。

我认为最简单的绕过方法是简单地设置不向用户显示的第二个输入。尽管后端的用户界面并不友好，但它确实可以解决问题。

我应该指出，我听到这个问题最常见的地方是 IE，而不是 FireFox 或其他。尽管这似乎也影响了他们。

回复收藏 0 原文

高冷爸爸 2024-08-10 21:03:01

这是 IE6/7/8 中的已知错误。看来您不会得到修复。

为此，您可以采取的最佳解决方法是添加另一个隐藏字段（如果您的工程良知允许）。当 IE 发现表单中有两个输入类型字段时，将不再自动提交表单。

更新

如果您想知道为什么会出现这种情况，这个宝石直接来自HTML 2.0 规范（第 8.2 节）：

当表单中只有一个单行文本输入字段时，
用户代理应接受该字段中的 Enter 作为提交请求
表格。

回复收藏 0 原文

苏璃陌 2024-08-10 21:03:01

否，默认行为是在输入时提交表单中的最后一个输入。
如果您根本不想提交，您可以添加：

<form onsubmit="return false;">

或者在您的输入中

<input ... onkeypress="return event.keyCode != 13;">

当然还有更漂亮的解决方案，但这些解决方案更简单，无需任何库或框架。

No, the default behaviour is that on enter, last input in the form is submitted.
If you don't want to submit at all you could add:

<form onsubmit="return false;">

Or in your input

<input ... onkeypress="return event.keyCode != 13;">

Of course there are more beautiful solutions but these are simpler without any library or framework.

回复收藏 0 原文

把时间冻结 2024-08-10 21:03:01

按 Enter 的效果会有所不同，具体取决于 (a) 有多少个字段和 (b) 有多少个提交按钮。它可能什么也不做，它可能提交没有“成功”提交按钮的表单，或者它可能假装第一个提交按钮被单击（甚至为其生成一个 onclick！）并使用该按钮的值提交。

例如，如果您将 input type="submit" 添加到两字段表单中，您会注意到它也会提交。

这是一个古老的浏览器怪癖，至少可以追溯到早期的 Netscape（也许更远），现在不太可能改变。

<表单>

没有“行动”则无效。如果您不打算在任何地方提交，并且不需要单选按钮名称分组，则可以完全省略表单元素。

回复收藏 0 原文

路还长，别太狂 2024-08-10 21:03:01

这是我用来解决问题的代码：

<form>
<input type="text" name="partid" id="partid"  />
<input type="text" name="StackOverflow1370021" value="Fix IE bug" style="{display:none}" />
</form>

Here is the code that I used would use to solve the problem:

<form>
<input type="text" name="partid" id="partid"  />
<input type="text" name="StackOverflow1370021" value="Fix IE bug" style="{display:none}" />
</form>

回复收藏 0 原文

七颜 2024-08-10 21:03:01

它不是重新加载页面，而是提交表单。

但是，在此示例中，因为您在提交给自身的表单上没有操作属性，所以给人的印象是重新加载页面。

另外，我无法重现您所描述的行为。如果我在表单中的任何文本输入中按 Enter 键，则无论输入位于表单中的哪个位置或有多少个输入，它都会提交表单。

您可能想在不同的浏览器中进行更多尝试。

回复收藏 0 原文

暖伴 2024-08-10 21:03:01

正如 vineet 已经说过的，这植根于 html 2.0 规范：

以下是如何防止这种情况发生而不搞乱你的网址：

<form>
    <input type="text" name="partid" id="partid"  />
    <input type="text" style="display: none;" />
</form>

as vineet already said, this is rooted in the html 2.0 specification:

here is how to prevent this from happening without screwing up your urls:

<form>
    <input type="text" name="partid" id="partid"  />
    <input type="text" style="display: none;" />
</form>

回复收藏 0 原文

救星 2024-08-10 21:03:01

感谢所有回答的人。令人大开眼界的是，具有单个字段的表单与具有多个字段的表单的行为不同。

处理这种自动提交的另一种方法是编写一个返回 false 的提交函数。

就我而言，我有一个带有 onclick 事件的按钮，因此我将添加了 return 关键字的函数调用移至 onsubmit 事件。如果调用的函数返回 false，则不会发生提交。

<form onsubmit="return ajaxMagic()">
<input type="text" name="partid" id="partid"  />
<input type="submit" value="Find Part" />
</form

function ajaxMagic() {
  ...
  return (false);
}

Thanks to everyone who answered. It's an eye opener that a form with a single field acts differently then a form with many fields.

Another way to deal with this automatic submit, is to code a submit function that returns false.

In my case I had a button with an onclick event, so I moved the function call with the added return keyword to the onsubmit event. If the function called returns false the submit won't happen.

<form onsubmit="return ajaxMagic()">
<input type="text" name="partid" id="partid"  />
<input type="submit" value="Find Part" />
</form

function ajaxMagic() {
  ...
  return (false);
}

回复收藏 0 原文

听风吹 2024-08-10 21:03:01

我为我测试的所有浏览器（IE、FF、Chrome、Safari、Opera）找到的解决方案是，表单上的第一个输入 type=submit 元素必须是可见的，并且必须是表单中的第一个元素。我能够使用 CSS 放置将提交按钮移动到页面底部，并且它不会影响结果！

<form id="form" action="/">
<input type="submit" value="ensures-the-enter-key-submits-the-form"
                      style="width:1px;height:1px;position:fixed;bottom:1px;"/>
<div id="header" class="header"></div>
<div id="feedbackMessages" class="feedbackPanel"></div>
     ...... lots of other input tags, etc...
</form>

The solution I found for all of the browsers that I tested (IE, FF, Chrome, Safari, Opera) is that the first input type=submit element on the form has to be visible and has to be the first element in the form. I was able to use CSS placement to move the submit button to the bottom of the page and it did not affect the results!

<form id="form" action="/">
<input type="submit" value="ensures-the-enter-key-submits-the-form"
                      style="width:1px;height:1px;position:fixed;bottom:1px;"/>
<div id="header" class="header"></div>
<div id="feedbackMessages" class="feedbackPanel"></div>
     ...... lots of other input tags, etc...
</form>

回复收藏 0 原文

不寐倦长更 2024-08-10 21:03:01

这个问题在IE和Chrome中都会出现。
它不会发生在 Firefox 上。
一个简单的解决方案是将以下属性添加到表单标签：
onsubmit="return false"

当然，假设您使用 XMLHttpRequest 对象提交表单。

回复收藏 0 原文

走过海棠暮 2024-08-10 21:03:01

是的，具有单个 inputText 字段的表单在 HTML 4 中的工作方式有所不同。
onSubmit return false 对我不起作用，但下面的修复错误工作正常

<!--Fix  IE6/7/8 and  HTML 4 bug -->
    <input style="display:none;" type="text" name="StackOverflow1370021" value="Fix IE bug" />

Yes, form with a single inputText field working as different in HTML 4.
onSubmit return false not working for me but the below fix bug is working fine

<!--Fix  IE6/7/8 and  HTML 4 bug -->
    <input style="display:none;" type="text" name="StackOverflow1370021" value="Fix IE bug" />

回复收藏 0 原文

羅雙樹 2024-08-10 21:03:01

我通过以下代码处理了这个问题，但我不确定这是否是一个好方法。
通过查找给定表单中的输入字段以及其是否为 1 来阻止默认操作。

 if($j("form#your-form input[type='text']").length == 1) {
   $j(this).bind("keypress", function(event) {
     if(event.which == 13) {
       event.preventDefault();
     }
   });
 }

I handled this by the following code but I am not sure if this a good approach.
By looking for input fields in a given form and if its 1 prevent the default action.

 if($j("form#your-form input[type='text']").length == 1) {
   $j(this).bind("keypress", function(event) {
     if(event.which == 13) {
       event.preventDefault();
     }
   });
 }

回复收藏 0 原文