用jQuery在“ Enter”上提交表单?


427

我有一个标准的登录表单-使用HTML / jQuery的AIR项目上的电子邮件文本字段,密码字段和提交按钮。当我在表单上按Enter键时,整个表单的内容消失了,但是表单没有提交。有谁知道这是Webkit的问题(Adobe AIR使用Webkit的HTML)还是我捆绑了东西?

我试过了:

$('.input').keypress(function (e) {
  if (e.which == 13) {
    $('form#login').submit();
  }
});

但这既没有停止清算行为,也没有提交表格。没有与表单相关的操作-可能是问题吗?我可以在动作中添加JavaScript函数吗?


3
您的<input ...上真的有class =“ input”属性吗?似乎应该是$('input')。
keypress

这些类由CMS以编程方式生成。但是,除此之外,将其范围限定为$('input')会影响页面上的每个输入,无论我是否想要该行为。对不起,这冒犯了您的敏感性。
be hollenbeck 2012年

15
敏感度至少没有受到冒犯。只是认为可能是导致问题的疏忽。继续。
NexusRex 2012年

1
仅供参考:您接受的答案并不完全准确。请参阅下面的答案。
NoBrainer 2012年

Answers:


399
$('.input').keypress(function (e) {
  if (e.which == 13) {
    $('form#login').submit();
    return false;    //<---- Add this line
  }
});

看看这个stackoverflow答案: event.preventDefault()vs. return false

本质上,“ return false”与调用e.preventDefault和相同e.stopPropagation()


3
注意它们是不一样的。IE8没有e.preventDefault。对于IE8,请使用event.returnValue = false;。
mbokil

8
@mbokil除了使用jQuery时,在IE8中相同。和IE7。和IE6。
凯文B

如果要首先在输入字段中键入,请输入“ return false;”。在if语句中。
朱尼·布鲁萨斯

173

正如Jason Cohen所提到的,除返回false外。您可能还必须防止Default

e.preventDefault();

13
正如@NoBrainer所说,这是错误的:return false在jQuery管理的事件中,自动调用e.preventDefault()
Riccardo Galli

83

不知道是否有帮助,但是您可以尝试模拟提交按钮的单击,而不是直接提交表单。我在生产中有以下代码,并且工作正常:

    $('.input').keypress(function(e) {
        if(e.which == 13) {
            jQuery(this).blur();
            jQuery('#submit').focus().click();
        }
    });

注意:jQuery('#submit')。focus()使按下Enter键时的按钮动画化。


2
效果不错,但我必须添加“ return false”;防止提交双重表格。
code90 2013年

工作中| 看到很多这样的结果,例如关于触发器,sendkey等,doh,blah ...的问题,但这对我来说是唯一的方法,实际上是单击按钮后发出的。没有submit()。因此,诀窍是安全性中的focus()。click()函数。谢谢。
m3nda 2014年

可行,但我必须将此代码放在以下位置:$(document).ready(function(){...
shasi kanth


30

您是否有任何原因需要挂接并测试Enter键?

您不能简单地添加一个

<input type="submit" /> 

到您的表单,并在按下enter键时自然提交了吗?如果需要,您甚至可以钩住表单的onsubmit动作并从那里调用验证函数。

您甚至可以将onsubmit用作测试来查看您的表单是否已提交,但是如果您致电,它将无法正常工作form.submit()


1
完全同意。我的喜好始终是使用浏览器的本机功能(type = submit的输入本机响应Enter键),而不是添加进一步模糊的脚本。–
Aaron

1
问题是,如果您正在做ajax东西并且没有实际的回发到服务器,但是您希望UI表现出用户期望的行为该怎么办?
devlord 2012年

确实...我忽略了整个return false;事情。
devlord 2012年

14

这是一种作为JQuery插件执行此操作的方法(以防您想重新使用该功能):

$.fn.onEnterKey =
    function( closure ) {
        $(this).keypress(
            function( event ) {
                var code = event.keyCode ? event.keyCode : event.which;

                if (code == 13) {
                    closure();
                    return false;
                }
            } );
    }

现在,如果您想<input>用这种功能来装饰元素,就这么简单:

$('#your-input-id').onEnterKey(
    function() {
        // Do stuff here
    } );

12

您也可以简单地onsubmit="return false"在页面中添加到表单代码中,以防止出现默认行为。

然后,使用javascript文件中的jQuery 将表单事件挂接到(.bind.livesubmit任何函数。

这是一个示例代码,可以帮助您:

的HTML

<form id="search_form" onsubmit="return false">
   <input type="text" id="search_field"/>
   <input type="button" id="search_btn" value="SEARCH"/>
</form>

Javascript + jQuery

$(document).ready(function() {

    $('#search_form').live("submit", function() {
        any_function()
    });
});

自2011年4月13日开始,使用Firefox 4.0和jQuery 1.4.3


它在Chrome中不起作用。无论如何都会提交。
MarceloAgimóvel

5

这是我的代码:

  $("#txtMessage").on( "keypress", function(event) {
    if (event.which == 13 && !event.shiftKey) {
        event.preventDefault();
        $("#frSendMessage").submit();
    }
    });

4

另外,为了保持可访问性,您应该使用以下代码来确定您的密钥代码:

c = e.which ? e.which : e.keyCode;

if (c == 13) ...

3

只需添加即可轻松实现。您可以简单地创建一个表单,然后将“提交”按钮隐藏起来:

例如:

<form action="submit.php" method="post">
Name : <input type="text" name="test">
<input type="submit" style="display: none;">
</form>

@cebirci,您的Chrome浏览器是哪个版本?我从笔记本电脑到PC进行了测试,我的代码也可以正常工作。在将其标记为我的答案之前,请尝试下载最新的Chrome。
Joem Maranan

2

我现在用

$("form").submit(function(event){
...
}

首先,我向提交按钮添加了一个事件处理程序,这给我带来了错误。


1

我今天发现按下Enter键时不会触发keypress事件,因此您可能想改用keydown()或keyup()。

我的测试脚本:

        $('.module input').keydown(function (e) {
            var keyCode = e.which;
            console.log("keydown ("+keyCode+")")
            if (keyCode == 13) {
                console.log("enter");
                return false;
            }
        });
        $('.module input').keyup(function (e) {
            var keyCode = e.which;
            console.log("keyup ("+keyCode+")")
            if (keyCode == 13) {
                console.log("enter");
                return false;
            }
        });
        $('.module input').keypress(function (e) {
            var keyCode = e.which;
            console.log("keypress ("+keyCode+")");
            if (keyCode == 13) {
                console.log("Enter");
                return false;
            }
        });

在键盘上键入“ A Enter B”时,控制台中的输出:

keydown (65)
keypress (97)
keyup (65)

keydown (13)
enter
keyup (13)
enter

keydown (66)
keypress (98)
keyup (66)

您会在第二个序列中看到'keypress'丢失了,但是按下/释放了keydown和keyup寄存器代码'13'。根据关于功能keypress()的jQuery文档

Note: as the keypress event isn't covered by any official specification, the actual behavior encountered when using it may differ across browsers, browser versions, and platforms.

在Server 2012 R2的IE11和FF61上测试


0

在HTML代码中:

<form action="POST" onsubmit="ajax_submit();return false;">
    <b>First Name:</b> <input type="text" name="firstname" id="firstname">
    <br>
    <b>Last Name:</b> <input type="text" name="lastname" id="lastname">
    <br>
    <input type="submit" name="send" onclick="ajax_submit();">
</form>

在Js代码中:

function ajax_submit()
{
    $.ajax({
        url: "submit.php",
        type: "POST",
        data: {
            firstname: $("#firstname").val(),
            lastname: $("#lastname").val()
        },
        dataType: "JSON",
        success: function (jsonStr) {
            // another codes when result is success
        }
    });
}

1
请不要针对多个问题发布相同的答案。发表一个好的答案,然后投票/标记以将其他问题重复作为一个重复。如果问题不是重复的,请定制问题的答案。
Paul Roub

@PaulRoub我的回答与另一个有一些不同。
mghhgm

这个答案与这个这个有什么不同?
Paul Roub

@PaulRoub我有这个问题,首先搜索谷歌。那几页,谈论这个问题,但并不简单。当我找到最佳答案时,我决定在该页面上分享。该页面旨在帮助用户搜索该页面,并在一些类似的stackoverflow页面上看到我的答案。
mghhgm

1
这个答案是不相关的所有问题
佐尔坦SULE

-4

尝试这个:

var form = document.formname;

if($(form).length > 0)
{
    $(form).keypress(function (e){
        code = e.keyCode ? e.keyCode : e.which;
        if(code.toString() == 13) 
        {
             formsubmit();
        }
    })
}

9
这以一种不舒服的方式将jquery与普通javascript混合在一起,并且包括一个确实很奇怪的演员表,
这只会使
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.