当没有 type="submit" 元素时，表单未在 ENTER 上提交

Question

我们使用自定义按钮来提交表单。将点击事件分配给 .btn-submit 以提交相应的表单。但是，如果在 <form> 中没有某种类型的 <button type="submit"> 或 <input type="submit"> 元素，则在用户名或密码文本字段中按 ENTER 不会提交表单。

在input 字段中按ENTER 键时，如果<form> 中没有type="submit" 元素，我如何仍然允许用户提交表单？

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

Answer 1

您需要捕获输入按键，最好在表单上使用 jQuery 委托。我想，只需将您的代表瞄准表单并查看输入元素，或者查看表单的主体。本质上它是在说“查看这个顶部元素，触发内部元素的 X 动作”。你的父母是表单，内部输入，动作是 keydown 或 keyup

看到这个： jQuery delegate method not working for keydown and keypress

然后在函数中测试按下了什么键。如果输入，提交。如果不是，则返回 false。

PS：当我不在手机上时，我可以为你做一个代码 sn-p。

Answer 2

原因如下：

当用户尝试提交时，提交事件被发送到一个元素 提交表格。它只能附加到<form> 元素。表格可以 通过单击明确的<input type="submit"> 提交， <input type="image">，或<button type="submit">，或按 Enter 当某些表单元素具有焦点时。

根据浏览器的不同，回车键可能只会导致一个表单 如果表单只有一个文本字段，则提交，或者仅当有 是一个提交按钮。接口不应依赖于 此键的特定行为，除非问题是由 观察按下 Enter 键的 keypress 事件。

来源：http://api.jquery.com/submit/

Answer 3

你可以这样做，这样当在输入中按下回车键时，它会激活提交按钮

$('form').keypress(function(e){
    var code = e.keyCode || e.which;

    if( code === 13 ) {
        e.preventDefault();
        $( ".btn-submit" ).click();
    };
});

编辑

如果在textarea 中按下返回，这不会导致点击提交按钮，它只会对text 类型的inputs 执行此操作。

$('input:text').keypress(function(e){
    var code = e.keyCode || e.which;

    if( code === 13 ) {
        e.preventDefault();
        $( ".btn-submit" ).click();
    };
});