Question

我有一个标准的登录表单 - 一个电子邮件文本字段，一个密码字段和一个使用HTML / jQuery的AIR项目的提交按钮。当我在表单上按Enter键时，整个表单的内容消失，但表单未提交。有谁知道这是一个Webkit问题（Adobe AIR使用Webkit for HTML），还是我已经把事情搞砸了？

我试过了：

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

但这既没有阻止清算行为，也没有提交表格。没有与表单相关的操作 - 这可能是问题吗？我可以在动作中加入javascript函数吗？

Answer 1

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

注意：您接受了bendewey的回答，但它对e.preventDefault（）的描述不正确。看看这个stackoverflow答案： event.preventDefault() vs. return false

基本上，“return false”与调用e.preventDefault和e.stopPropagation()相同。

Answer 2

除了Jason Cohen提到的返回假。您可能还必须阻止默认

e.preventDefault();

Answer 3

不知道它是否有用，但您可以尝试模拟提交按钮点击，而不是直接提交表单。我在生产中有以下代码，它工作正常：

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

注意： jQuery（'＃submit'）。focus（）在按下回车时使按钮具有动画效果。

Answer 4

返回false以防止击键继续。

Answer 5

您是否有任何理由需要挂钩并测试回车键？

你不能简单地添加一个

<input type="submit" />

到您的表单并在输入被推送时自然提交？你甚至可以勾选表单的onsubmit动作，如果你想要的话，从那里调用一个验证函数......

您甚至可以使用onsubmit作为测试来查看您的表单是否正在提交，但如果您致电form.submit()则无效。

Answer 6

这是一种以JQuery插件的方式执行此操作的方法（如果您想重新使用该功能）：

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

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

现在，如果你想用这种类型的功能来装饰它，它就像这样简单：

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

Answer 7

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

然后将表单的.bind事件挂钩（.live或submit）到javascript文件中使用jQuery的任何函数。

以下是帮助的示例代码：

<强> 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-04-13，使用Firefox 4.0和jQuery 1.4.3

Answer 8

另外，为了保持可访问性，您应该使用它来确定您的密钥代码：

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

if (c == 13) ...

Answer 9

这是我的代码：

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

Answer 10

只需添加即可轻松实施。您只需创建一个表单，然后隐藏提交按钮：

例如：

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

Answer 11

我现在用

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

首先，我在提交按钮中添加了一个事件处理程序，这对我产生了错误。

Answer 12

在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
        }
    });
}

Answer 13

因为可能会迟到但您可以在 html 中添加以下行：-

<input onkeyup="submitForm(event)" oninput="addTextName(this)" type="text" id="name-val">

并在js文件中添加这个

function submitForm(e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode == 13){
    toggleNextScreen();
}

}

keycode 13 表示回车

Answer 14

我今天发现按下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”。根据{{3}}：

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上测试

Answer 15

试试这个：

var form = document.formname;

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

使用jQuery在'Enter'上提交表单？

15 个答案: