Javascript 按enter键时不提交表单
我有以下HTML/JS/jQuery代码。此代码表示一个登录表单,该表单以模式呈现给用户,以允许他们登录。问题是,当我点击enter时,表单似乎没有执行“onsubmit”事件。当我单击表单底部的按钮时(它的代码与onsubmit事件的代码几乎相同),它可以完美地工作。我想知道是否有人能告诉我为什么这个表格没有提交。。?任何协助都将不胜感激 显示登录模式的jQuery代码:Javascript 按enter键时不提交表单,javascript,html,forms,submit,dom-events,Javascript,Html,Forms,Submit,Dom Events,我有以下HTML/JS/jQuery代码。此代码表示一个登录表单,该表单以模式呈现给用户,以允许他们登录。问题是,当我点击enter时,表单似乎没有执行“onsubmit”事件。当我单击表单底部的按钮时(它的代码与onsubmit事件的代码几乎相同),它可以完美地工作。我想知道是否有人能告诉我为什么这个表格没有提交。。?任何协助都将不胜感激 显示登录模式的jQuery代码: showDivAndFocus('loginModal','loginaccount'); function show
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>
你有两个选择:
,这就是您所追求的自动输入键行为它也可以来自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>
然后删除您放置在那里的返回false
,以防止该按钮提交表单
为了便于学习,
类型默认为submit。如果希望它们充当窗体的控件,则必须指定type=“button”
或type=“reset”
我一直在努力解决这个问题;我的一个表单在文本字段中按“回车”时提交,没有问题;为了我的生命,同一页上的另一张类似的表格根本不会提交
这两个字段都没有提交按钮,也没有使用javascript进行任何提交
我发现,当表单中只有一个文本字段时,按文本字段中的“enter”将自动提交;但如果有多个(常规(即单行)文本输入)字段,则不会执行任何操作,除非还有某种“提交”按钮
显然,这是:
当表单中只有一个单行文本输入字段时,用户代理应接受在该字段中输入作为提交表单的请求
。。。显然,这是一种提交简单查询的便捷方式,但降低了复杂表单在填写时过早提交的风险。许多浏览器实现者(如Netscape、Opera、各种版本的Lynx等)都遵循了这一建议,尽管其解释似乎略有不同
我做了。据我所知(只是懒洋洋地用Chrome测试),如果只有一个文本字段,或者如果有一个提交按钮,即使它是隐藏的,表单也会在“回车”时提交
(编辑:我后来发现,如果有其他输入字段不是常规的单行文本输入,那么它似乎也能工作……例如,textareas、selects等等——感谢@user3292788提供了这些信息。更新了JSFIDLE以反映这一点)
表单只有一个文本字段,没有提交按钮
在第一个文本字段中按“回车”时似乎会自动提交
搜寻
表单有两个文本字段,没有提交按钮
在表单中按“回车”键时不会提交
搜寻
表单包含两个文本字段和一个提交按钮。。。
现在它使用“回车”键提交
搜寻
表单包含两个文本字段和一个隐藏的提交按钮。。。
似乎工作,即使提交隐藏
搜寻
表单没有操作或方法属性,隐藏提交按钮。。。
即使这样似乎也行得通
搜寻
表单有多个字段,但只有一个文本输入,没有提交按钮。
这似乎也行得通
价值
如果您有正确的输入提交按钮,但在该按钮上使用(单击)事件,则不会在输入时触发该按钮。显然,它将提交表单,但不会触发按钮上的单击事件。将功能设置为表单本身和它的提交事件将使其工作。以防万一有人犯了与我相同的错误,并来到这里寻找答案:
如果表单中有两个(或多个)提交按钮1,则按enter键只会触发第一次提交,而不会触发第二次提交
1正如@paul daoust在他对@g-d-d-c答案的评论中所指出的:
和
都将作为提交按钮来工作,我还想补充一点,如果你有嵌套的
,那么只有直接在表单中的
会在回车时触发提交,嵌套表单中的输入不起作用
<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>
拯救
我不相信这是真的。。按下enter键时,表单应以任意方式提交。我有另一种形式做几乎相同的事情。它没有被显示为“模式”,这是我能看到的唯一真正的区别。当然,两个表单都没有提交按钮或onkeyX事件。我选择
,因为它在语义上更正确。@Dutchie432-据我所知(如果我错了,我希望有人纠正我),你在另一个表单上的行为要么是错误的,或者,在按enter键之前,焦点转移到某个提交按钮。使用
时,HTML表单只能通过Enter键提交。但是,如果您确实关注某个按钮,则enter键可能会为您“单击”该按钮。请注意:如果表单没有提交按钮(无论是
还是
)。带有提交按钮的表单应该在回车时提交,而不考虑文本输入的数量(尽管我的表单现在没有这种情况,我不知道为什么)。此外,如果您的
元素没有类型,它将在旧版本的IE中充当提交按钮。为了澄清@Pauld'Aoust所做的评论,[Enter]
仅在只有一个文本输入,而不是一个或多个文本输入时才起作用。我认为您错过了单行文本输入字段precisio
<button id='button' type="button">Reset</button>
<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>
<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>