我有以下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 width="95%" 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 width="50" 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 width="50"> </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;
}
答案 0 :(得分：33)
我正在努力解决同样的问题;我的一个表单是在文本字段中按“输入”时提交没有问题;对于我的生活，在同一页面上的另一个类似的表格根本不会提交。
两个字段都没有提交按钮，也没有使用javascript进行任何提交。
我发现，当表单中只有一个文本字段时，在文本字段中按“输入”将自动提交;但是如果有多个（常规（即单行）文本输入）字段，它什么都不做，除非还有某种“提交”按钮。
的一部分如果表单中只有一个单行文本输入字段，则用户代理应接受该字段中的Enter作为提交表单的请求。
An old, but apparently still valid, and interesting, further discussion here
...显然是一种提交简单查询的便捷方式，但是在复杂的形式上降低了在尝试填写时过早提交的风险。许多浏览器实现者（例如Netscape，Opera，各种版本的Lynx，......）遵循了这个建议，虽然看起来略有不同。
我做了a JSFiddle to demonstrate。据我所知（懒惰只是用Chrome测试），如果只有一个文本字段，或者如果有提交按钮，表单将在“Enter”上提交，即使它是隐藏的。
（编辑：我后来发现，如果有其他输入字段不是常规的单行文本输入，它似乎也有效...例如，textareas，选择等等 - 感谢@ 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>
答案 1 :(得分：26)
您有两种选择：
<input type=submit>，这就是您获得自动输入密钥行为的原因。答案 2 :(得分：4)
它也可以来自javascript绑定到表单中的<button>。例如，如果你有
<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
答案 3 :(得分：1)
如果您具有正确的输入-提交按钮，但在该按钮上使用了（单击）事件，则在输入时将不会触发它。显然，它将提交表单但不触发按钮上的click事件。通过将功能本身形成以及它的Submit事件将使其起作用。
答案 4 :(得分：0)
以防万一有人犯了与我相同的错误，并且也来这里寻找答案：
如果您的表单中有两个（或更多）提交按钮 1 ，则按Enter键只会触发第一个提交，而不会触发第二个提交。
1 ，如@ paul-daoust在对@gddc的答案的评论中所指出的：<input type=submit>和<button type=submit>都将用作提交按钮< / em>
答案 5 :(得分：0)
另外，请确保表单中只有一个提交按钮。
即单个
<input type="submit">
声明
即使您使用 JavaScript 隐藏或显示它，这也适用。
如果由于某种原因您的表单中有多个提交按钮，唯一可用的方法是使用 JavaScript 监听提交事件。
答案 6 :(得分：-1)
我还想补充一点，如果您嵌套了<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>