ChatGPT解决这个技术问题 Extra ChatGPT

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

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

我试过了:

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

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

您的
这些类由 CMS 以编程方式生成。但是,除此之外,将其限定为 $('input') 会影响页面上的每个输入,无论我是否想要该行为。对不起,它冒犯了你的感情。
感情一点也没有冒犯。只是认为这可能是导致问题的疏忽。继续。

N
NoBrainer
$('.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.preventDefaulte.stopPropagation() 相同。


请注意,它们并不相同。 IE8 没有 e.preventDefault。对于 IE8 使用 event.returnValue = false;
@mbokil 除了使用 jQuery 时,在 IE8 中是相同的。和IE7。和IE6。
如果要先在输入字段中输入,请输入“return false;”在 if 语句中。
S
Seb

除了像 Jason Cohen 提到的那样返回 false 之外。您可能还必须防止默认

e.preventDefault();

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

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

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

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


效果很好,但我不得不添加“return false;”防止双重提交。
工作 |看到很多像这样谈论触发器、sendkey 等的结果,doh、blah……,但这对我来说是唯一有效的,并且真正发送点击按钮。不提交()。所以,诀窍是在 secuence 中的 focus().click() 函数。谢谢你。
工作,但我不得不把这段代码放在: $(document).ready(function() {...
J
Jason Cohen

返回 false 以防止继续击键。


Z
Zack The Human

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

你不能简单地添加一个

<input type="submit" /> 

到您的表单并在输入时自然提交?如果需要,您甚至可以挂钩表单的 onsubmit 操作并从那里调用验证函数...

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


完全同意。我的偏好始终是使用浏览器的本机功能(type=submit 的输入本机响应回车键按下),而不是添加更多杂乱无章的脚本。
问题是,如果您正在做 ajax 的事情并且没有实际回发到服务器,但您希望 UI 的行为符合用户的期望,该怎么办?
确实...我忽略了整个 return false; 的事情。
V
Viktor Borítás

这是作为 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
    } );

J
Jeff Yates

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

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

这是一个帮助示例代码:

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


H
Hoàng Vũ Tgtt

这是我的代码:

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

L
Logan Serman

同样为了保持可访问性,您应该使用它来确定您的键码:

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

if (c == 13) ...

J
Joem Maranan

只是为了便于实施而添加。您可以简单地制作一个表单,然后隐藏提交按钮:

例如:

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

@cebirci,你的 chrome 是什么版本?我从笔记本电脑到个人电脑进行了测试,我的代码可以正常工作。尝试下载最新的 chrome,然后再将其标记为我的答案。
V
Viktor Borítás

我现在用

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

起初我向提交按钮添加了一个事件处理程序,这对我产生了错误。


P
Piemol

我今天发现按下 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”被按下/释放。根据 jQuery documentation on the function keypress()

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


刚刚在 Chrome 90、Edge 90 和 FF88 上进行了测试。谢谢!
a
alihussain kabri

因为它可能会迟到,但您可以在 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 表示输入


m
mghhgm

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

请不要对多个问题发布相同的答案。发布一个好的答案,然后投票/标记以关闭其他问题作为重复问题。如果问题不是重复的,请调整您对该问题的答案。
@PaulRoub 我的回答与另一个有些不同。
这个答案与 thisthis 有何不同?
@PaulRoub我有这个问题,首先在谷歌上搜索这个。那几页,讲这个问题可是不简单的。当我找到最佳答案时,我决定在 That pages talk about 以帮助用户搜索此内容时分享此内容,请在一些类似的 stackoverflow 页面上查看我的答案。
这个答案根本与问题无关
r
rsm
$('form#login').keypress(function (e) {
   var keyCode = e.keyCode ? e.keyCode : e.which;       
   if (keyCode == 13) 
   {
      e.preventDefault();
      $('form#login').submit();
      return false; 
   }
});

通过添加有关代码的作用以及它如何帮助 OP 的更多信息,可以改进您的答案。
P
Pang

尝试这个:

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 与 vanilla javascript 混合在一起,并且包括一个非常奇怪的演员阵容,这只会让事情变得混乱