我们使用自定义按钮提交表单。将单击事件分配给..btn submit,以提交相应的表单。但是,如果没有某种类型的<button type="submit">或<input type="submit">元素位于<form>中,则在“用户名”或“密码”文本字段中按ENTER键都不会提交表单。
如何仍然允许用户在没有type="submit"元素的情况下在<form>字段中按ENTER键提交表单?
HTML
<form action="post.php" method="post">
<p><b>Username</b> <input type="text" name="username" style="width: 300px; font-size: 18px"></p>
<p><b>Password</b> <input type="password" name="password" style="width: 300px; font-size: 18px"></p>
<input type="hidden" name="user_login" value="1">
<div class="btn-inline btn-green btn-submit">Log In</div>
</form>JS
$(document).ready(function()
{
$('.btn-submit').on('click', function(e)
{
$(this).parents('form:first').submit();
});
});发布于 2014-10-17 21:48:01
您可以这样做,以便当enter键在输入中按下时,它会激活submit按钮。
$('form').keypress(function(e){
var code = e.keyCode || e.which;
if( code === 13 ) {
e.preventDefault();
$( ".btn-submit" ).click();
};
});编辑
这不会导致单击submit按钮,如果在textarea中按下返回,它将只对现在类型为text的input进行单击。
$('input:text').keypress(function(e){
var code = e.keyCode || e.which;
if( code === 13 ) {
e.preventDefault();
$( ".btn-submit" ).click();
};
});发布于 2014-10-17 21:33:14
您需要捕获enter键按下,最好在表单上使用jQuery委托。我想,只需将您的委托锁定在表单上,并查看输入元素,或者查看表单的主体。本质上是说“看看这个最上面的元素,触发内部元素的X动作”。您的父级将是表单,内部输入,操作是按下或键控。
参见:jQuery delegate method not working for keydown and keypress
然后在功能测试中按下按键。如果进入,提交。如果没有,则返回false。
PS:当我不在手机上的时候,我可以帮你做一个代码片段。
发布于 2014-10-17 21:42:54
这就是为什么:
当用户试图提交表单时,提交事件将发送给元素。它只能附加到
<form>元素。表单可以通过单击显式<input type="submit">、<input type="image">或<button type="submit">提交,或者在某些表单元素有焦点时按Enter。 根据浏览器的不同,只有当表单有一个文本字段时,或者只有当存在提交按钮时,Enter键才可能导致表单提交。接口不应依赖此键的特定行为,除非通过观察Enter键按下的keypress事件来强制发出该问题。
https://stackoverflow.com/questions/26433677
复制相似问题