Javascript 为什么单输入字段的表单在按输入键时提交
为什么当用户输入一个值并按下Enter键时，带有单个Javascript 为什么单输入字段的表单在按输入键时提交,javascript,html,forms,Javascript,Html,Forms,为什么当用户输入一个值并按下Enter键时，带有单个字段的会重新加载表单，而如果中有两个或更多字段，则不会重新加载表单 我写了一篇文章来测试这个奇怪的现象 如果您在第二个表单中输入一个值并按enter键，您将看到它通过输入的值重新加载页面，就像调用了GET。为什么？我该如何避免呢 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra
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>
testFormEnter
2.现场表单工作正常
按Enter键时，一个字段表单将重新加载页面。为什么
我应该注意到，我听到这个问题最常见的地方是IE，而不是FireFox或其他。虽然它似乎也会影响他们。它并不是重新加载页面，而是提交表单 但是，在本例中，因为在表单提交给自身的表单上没有action属性，这会给人重新加载页面的印象 而且，我不能责备你描述的行为。如果我在表单中的任何文本输入中，并且我按Enter键，则无论输入位于表单中的何处或有多少输入，它都会提交表单 您可能想在不同的浏览器中尝试更多的功能。这是一个很好的解决方案。看来你不会得到修复 为此，最好的解决方法是添加另一个隐藏字段（如果您的工程良心允许的话）。当IE发现表单中有两个输入类型字段时，它将不再自动提交表单 更新 如果您想知道为什么会出现这种情况，此宝石直接来自： 当表单中只有一个单行文本输入字段时 用户代理应接受在该字段中输入作为提交请求 表格
根据（a）有多少字段和（b）有多少提交按钮，按Enter键的工作方式不同。它可能什么也不做，它可能在提交表单时没有“成功”的提交按钮，或者它可能假装单击了第一个提交按钮（甚至为它生成一个onclick！），然后使用该按钮的值提交 例如，如果您在双字段表单中添加一个
input type=“submit”没有“操作”无效。如果您不打算在任何地方提交，也不需要单选按钮名称分组，您可以完全省略表单元素。感谢所有回答的人。令人大开眼界的是，一个只有一个字段的表单的行为与一个有许多字段的表单的行为不同 处理这种自动提交的另一种方法是编写一个返回false的提交函数 在我的例子中，我有一个带有onclick事件的按钮，因此我将添加了
return<form onsubmit="return ajaxMagic()">
<input type="text" name="partid" id="partid" />
<input type="submit" value="Find Part" />
</form
function ajaxMagic() {
...
return (false);
}
下面是我用来解决问题的代码：
<form>
<input type="text" name="partid" id="partid" />
<input type="text" name="StackOverflow1370021" value="Fix IE bug" style="{display:none}" />
</form>
对于我测试过的所有浏览器（即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>
...... 很多其他的输入标签，等等。。。
正如Vinet所说，这源于html 2.0规范：
以下是如何在不破坏URL的情况下防止这种情况发生：
<form>
<input type="text" name="partid" id="partid" />
<input type="text" style="display: none;" />
</form>
IE和Chrome都会出现此问题。
它不会出现在Firefox上。
一个简单的解决方案是向表单标记添加以下属性：
onsubmit=“返回false”
当然，也就是说，假设您使用XMLHttpRequest对象提交表单。是的，表单中的单个inputText字段在HTML4中的工作方式不同。
onSubmit return false对我不起作用，但下面的修复程序运行良好
<!--Fix IE6/7/8 and HTML 4 bug -->
<input style="display:none;" type="text" name="StackOverflow1370021" value="Fix IE bug" />
我通过以下代码处理了这个问题，但我不确定这是否是一个好方法。
通过查找给定表单中的输入字段，如果其1阻止默认操作
if($j("form#your-form input[type='text']").length == 1) {
$j(this).bind("keypress", function(event) {
if(event.which == 13) {
event.preventDefault();
}
});
}
我认为这是一个功能，但我也禁用了它。禁用它不需要很大的努力。只需捕获回车键，忽略它即可。否，默认行为是在回车时提交表单中的最后一个输入。
如果您根本不想提交，可以添加：
<form onsubmit="return false;">
或者在你的输入中
<input ... onkeypress="return event.keyCode != 13;">
当然还有更漂亮的解决方案，但是没有任何库或框架，这些解决方案更简单。谢谢，我希望它能被记录在某个地方。我浪费了几个小时调试一个大页面，认为它是其他东西，与我的ajax相关。我只是在提取代码并开始逐行删除之后才发现了“怪癖”。真是浪费时间！你是对的，这是一个很容易修复的隐藏字段。顺便说一下，如果影响firefox 3.5.2。也许这被认为是一个特性。啊，是的，我感觉到了你的痛苦……这就是我发现它的原因，比如说5-6年前……我还发现隐藏字段并不总是有效的。在这一页上它做到了，而在另一页上它没有——也很奇怪。但是用javascript隐藏字段就成功了。你需要写一篇文章“你不知道的事情会占用你的时间”-感谢againI我在Chrome中调试，隐藏字段似乎不起作用