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

问题描述 投票:0回答:16

我有一个 bog 标准登录表单 - 使用 HTML/jQuery 的 AIR 项目上的电子邮件文本字段、密码字段和提交按钮。当我在表单上按 Enter 时,整个表单的内容消失,但表单未提交。有谁知道这是否是 Webkit 问题(Adobe AIR 使用 Webkit for HTML),或者我是否把事情搞砸了?

我尝试过:

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

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

javascript jquery html webkit forms
16个回答
448
投票
$('.input').keypress(function (e) {
  if (e.which == 13) {
    $('form#login').submit();
    return false;    //<---- Add this line
  }
});

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

本质上,“返回 false”与调用

e.preventDefault
e.stopPropagation()
相同。


175
投票

除了 Jason Cohen 提到的 return false 之外。您可能还必须阻止Default

e.preventDefault();

84
投票

不知道是否有帮助,但您可以尝试模拟提交按钮点击,而不是直接提交表单。我在生产中有以下代码,并且运行良好:

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

注意:jQuery('#submit').focus() 使按钮在按下 Enter 时呈现动画。


62
投票

返回

false
以防止继续击键。


31
投票

您是否有任何理由必须挂钩并测试回车键?

你不能简单地添加一个

<input type="submit" /> 

您的表单并在按下回车键时自然提交吗?如果您愿意,您甚至可以挂钩表单的

onsubmit
操作并从那里调用验证函数...

您甚至可以使用

onsubmit
作为测试来查看您的表单是否正在提交,但如果您调用
form.submit()
,则不起作用。


16
投票

这里有一种作为 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"
添加到页面中的表单代码中以防止默认行为。

然后将表单的

.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 年 4 月 13 日起,适用于 Firefox 4.0 和 jQuery 1.4.3


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>

3
投票

我现在用的

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

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


2
投票

今天我发现按下 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)

您会在第二个序列中看到“按键”丢失,但 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 上测试


1
投票

可能会迟到 但你可以在 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();
}

}

键码13表示输入


1
投票

当按键按下时,会触发事件。如果是 Enter 键,则会阻止该操作。返回 false 和 PreventDefault 以防止击键。

$('form#login').keypress(function (e) {
   var keyCode = e.keyCode ? e.keyCode : e.which;       
   if (keyCode == 13) 
   {
      e.preventDefault();
      $('form#login').submit();
      return false; 
   }
});

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

-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();
        }
    })
}
© www.soinside.com 2019 - 2024. All rights reserved.