按回车时表单未提交
Posted
技术标签:
【中文标题】按回车时表单未提交【英文标题】：Form not submitting when pressing enter 【发布时间】：2011-05-10 22:44:41 【问题描述】：我有以下 html/JS/jQuery 代码。此代码表示以模态方式呈现给用户以允许他们登录的登录表单。问题是，当我按 Enter 时，表单似乎没有执行“onsubmit”事件。当我单击表单底部的按钮（其代码与 onsubmit 事件几乎相同）时，它可以完美运行。我想知道是否有人可以告诉我为什么这个表格没有提交..？任何帮助将不胜感激。
显示登录模式的 jQuery 代码：
showDivAndFocus('loginModal','loginaccount');
function showDivAndFocus(v,t)
if (api)
if (api.isOpened)
api.close();
api = $('#'+v).overlay(
mask: color: '#000000',
top:'0px',
api: true,
autoScrollToActive: false,
autoScrollOffset: 0
).load();
document.getElementById(t).focus();
HTML 代码
<div class="modal" id="loginModal">
<h2>User Login</h2>
<br />
<form action="javascript:void(0);" onsubmit="return(doLogin());" name="loginForm" id="loginForm">
<table cellpadding="4" cellspacing="4">
<tr>
<td class="regw" align="left"><b>Account Number:</b></td>
<td class="regw" align="left"><input type="text" maxlength="10" size="10" name="loginaccount" id="loginaccount" /></td>
</tr>
<tr>
<td class="regw" align="left"><b>Username:</b></td>
<td class="regw" align="left"><input type="text" maxlength="20" size="20" name="loginusername" id="loginusername" /></td>
</tr>
<tr>
<td class="regw" align="left"><b>Password:</b></td>
<td class="regw" align="left"><input type="password" maxlength="20" size="20" name="loginpassword" id="loginpassword" /></td>
</tr>
<tr>
<td class="regw" align="left"><b>Remember Me:</b></td>
<td class="regw" align="left"><input type="checkbox" name="loginremember" id="loginremember" /></td>
</tr>
<tr><td colspan="2">
<div>
<center>
<table><tr><td valign="middle">
<div id="loginLoading" style="height:24px;width:24px;"></div>
</td><td>
<button onclick="doLogin();" type="button" class="ok">Submit</button>
</td><td>
<button onclick="api.close();" type="button" class="cancel">Cancel</button>
</td><td > </td></tr></table>
</center>
</div>
</td></tr>
</table>
</form>
</div>
AJAX 调用
function doLogin()
var ajax = getXmlObject();
var f = getFormVariables();
var url= '/login.php?f=' + encodeURIComponent(f);
if (ajax.readyState == 4 || ajax.readyState == 0)
ajax.open("POST", url, true);
ajax.onreadystatechange = function ()
if (ajax.readyState == 4)
var a = ajax.responseText;
if (a=="OK")... else ...
;
ajax.send(null);
return false;
【问题讨论】：
【参考方案1】：我也在为同样的问题而苦苦挣扎；在文本字段中按“输入”时，我的一个表单提交没有问题；在我的一生中，同一页面上的另一个类似的表单根本不会提交。
两个字段都没有提交按钮，也没有使用 javascript 进行任何提交。
我发现，当表单中只有一个文本字段时，在文本字段中按“输入”会自动提交；但如果有多个（常规（即单行）文本输入）字段，则它什么也不做，除非还有某种“提交”按钮。
显然这是HTML 2.0 specification的一部分：
当表单中只有一个单行文本输入字段时，用户代理应接受该字段中的 Enter 作为提交表单的请求。
An old, but apparently still valid, and interesting, further discussion here.
... 显然是一种提交简单查询的便捷方式，但降低了在尝试填写复杂表单时过早提交的风险。许多浏览器实现者（例如 Netscape、Opera、各种版本的Lynx,...) 遵循了这个建议，尽管它的解释似乎略有不同。
我制作了a JSFiddle to demonstrate。据我所知（懒惰地只是用 Chrome 测试），如果只有一个文本字段，或者如果有一个提交按钮，即使它被隐藏，表单也会在“Enter”上提交。
（编辑：我后来发现，如果有其他输入字段不是常规的单行文本输入……例如，textareas、selects 等，它似乎也可以工作。感谢@user3292788该信息。更新了 JSFiddle 以反映这一点）。
<h2>Form with one text field only, no submit button</h2>
<p>Seems to submit automatically when pressing 'enter' in the first text field</p>
<form action="" method="post">
<div>
<label for="pt-search-input">Search</label>
<div>
<input name="term" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a></div>
</div>
</form>
<h2>Form with two text fields, no submit button</h2>
<p>Won't submit when pressing 'enter' in the forms ...</p>
<form action="" method="post">
<div>
<label for="pt-search-input">Search</label>
<div>
<input name="term" type="text" placeholder="Example: budapest amsterdam" />
<input name="term2" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a></div>
</div>
</form>
<h2>Form with two text fields and a submit button ...</h2>
<p>Now it submits with 'enter' key</p>
<form action="" method="post">
<div>
<label for="pt-search-input">Search</label>
<div>
<input name="term" type="text" placeholder="Example: budapest amsterdam" />
<input name="term2" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a>
<input type="submit" />
</div>
</div>
</form>
<h2>Form with two text fields and a HIDDEN submit button ...</h2>
<p>Seems to work, even with submit hidden ...</p>
<form action="" method="post">
<div>
<label for="pt-search-input">Search</label>
<div>
<input name="term" type="text" placeholder="Example: budapest amsterdam" />
<input name="term2" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a>
<input type="submit" />
</div>
</div>
</form>
<h2>Form with no action or method attribute, HIDDEN submit button ...</h2>
<p>Even this seems to work.</p>
<form>
<div>
<label for="search-input">Search</label>
<div>
<input name="term" type="text" placeholder="Example: budapest amsterdam" />
<input name="term2" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a>
<input type="submit" />
</div>
</div>
</form>
<h2>Form with multiple fields, but only one text input, no submit button.</h2>
<p>This seems to work as well.</p>
<form action="" method="post">
<p><input type="text" ></p>
<textarea name="" id="" cols="30" rows="10"></textarea>
<p>
<select name="" id="">
<option value="">Value</option>
</select>
</p>
</form>
【讨论】：
我认为您错过了一个单行文本输入字段的精度。如果其他字段不是如上所述单行文本输入字段，则表单甚至会提交多个字段。您可以快速查看JSFiddle。顺便说一句，你的答案是正确的，帮助我解决了我的问题。 @user3292788 哦，好的。是的，我没有注意到，因为我的都是常规文本输入字段。没想过尝试其他类型的字段。 : ) 感谢您提供更多信息。我更新了答案以反映这一点。【参考方案2】：你有两个选择：
-
为回车按钮创建一个事件处理程序并将其添加到您的绑定中。
在表单中的某处使用
<input type=submit>，这就是您所追求的自动 Enter Key 行为的原因。
【讨论】：
我不相信这是真的。当按下回车键时，表单应该以任何一种方式提交。我有另一种形式做几乎同样的事情。它没有“模态”显示，这是我能看到的唯一真正的区别。但是，可以肯定的是，这两个表单都没有提交按钮或 onkeyX 事件。 我会选择<input type=submit>，因为它在语义上更正确。
@Dutchie432 - 据我了解（如果我弄错了，我希望有人能纠正我）你在另一种形式上的行为要么是错误的，要么是以某种方式转移注意力到您的提交按钮之一，然后再按回车键。 HTML 表单只能在使用 <input type=submit> 时通过 Enter 键提交。但是，如果您实际上将注意力集中在一个按钮上，则输入键可能会为您“单击”它。
请注意：如果表单没有提交按钮（<input type="submit"/> 或 <button type="submit"></button>）it will only auto-submit on Enter when it's got one text input。表单 with 提交按钮 应该 在 Enter 上提交，无论文本输入的数量如何（尽管现在我的表单上没有发生这种情况，我不知道为什么）。此外，如果您的<button> 元素没有type，它将在旧版本的 IE 中充当提交按钮。
澄清@Pauld'Aoust 的评论-[Enter] 仅在只有一个文本输入而不是一个或多个文本输入时才有效。【参考方案3】：
它也可以来自绑定到表单中<button> 的javascript。例如，如果你有
<button id='button'>Reset</button>
<span id="textToReset">some info</span>
<script type="text/javascript">
$('#button').bind('click', function()
$('#textToReset').text('');
return false;
)
</script>
您的 Enter 按钮将被 return false 捕获，您的表单不会在 Enter 键下提交。正确的方法是将<button> ACT 指定为按钮。这样：
<button id='button' type="button">Reset</button>
并删除您放在那里的return false，以防止该按钮提交表单。 ;-)
为了学习，<button> 类型默认提交。如果您希望它们充当您的表单的控件，则必须指定 type="button" 或 type="reset" See w3.org about it
【讨论】：
【参考方案4】：以防万一有人犯了和我一样的错误，也来这里寻找答案：
如果您的表单中有两个（或更多）提交按钮1，则按 Enter 只会触发第一个提交，而不是第二个。
1 正如@paul-daoust 在他对@gddc 答案的评论中指出的那样：<input type=submit> 和<button type=submit> 都将用作提交按钮
【讨论】：
【参考方案5】：如果您有正确的输入提交按钮，但在该按钮上使用（单击）事件，则输入时不会触发它。显然，它将提交表单但不会触发按钮上的点击事件。将功能放入表单本身及其提交事件将使其工作。
【讨论】：
请详细说明您的答案，同时请记住您的答案应该与已经发布的不同。发布一些示例代码并说明您的代码与其他代码有何不同。 我也将不胜感激。您（也许）在谈论发生在我身上的事情（即使我的表单未绑定点击但提交：$('#myForm.on('submit',function(e)e.preventDefault();$.ajax(...););）。单击<button type="submit"> 执行 AJAX（更新一些其他表单条目，执行 SQL，...）但在 Enter 上刷新页面，因此它丢失了 POST 数据，所以现在表单是空白的。如何最好地解决这个问题？我的解决方案：$('#myForm input[type=text]').keypress(function(e)if(e.which==13)e.preventDefault();$('#myForm').find('button[type=submit]').click(););
错字：$('#myForm').on('submit',function(e)e.preventDefault();$.ajax(...););【参考方案6】：
我还想补充一点，如果您嵌套了<form>，那么只有直接在表单中的<input> 会在输入时触发提交，嵌套表单中的输入不起作用。
<form submit="onSubmit">
<input type="text" name="submits-on-enter" />
<form submit="onSubmitNested">
<input type="text" name="DOES-NOT-submit-on-enter" />
</form>
<button type="submit">SAVE</button>
</form>
【讨论】：
如果有人投反对票，请客气，至少让我知道原因，谢谢。【参考方案7】：另外，请确保表单中只有一个提交按钮。 即单个
<input type="submit">
声明
这适用于即使您使用 JavaScript 隐藏或显示它。
如果由于某种原因您的表单中有多个提交按钮，唯一可用的方法是使用 JavaScript 监听提交事件。
【讨论】：
以上是关于按回车时表单未提交的主要内容，如果未能解决你的问题，请参考以下文章