按 ENTER 时提交表单

Question

我在主页/索引上。我有以下 HTML：

<form id="frmCode" style="display: inline-block">
    <input type="text" name="ConfirmationCode"/>
    <input type="button"/>
    <img src="~/Images/loading.gif" id="notificationLoading"/>
</form>

由于某种原因，如果我将光标放在 ConfirmationCode 输入中并按 Enter 键，则表单提交并重定向到 http://localhost:62500/?ConfirmationCode= 。问题是，我已经阅读了有关此行为的信息，并且我理解这可能是某种预期的行为，具体取决于浏览器等等。但我有这个另一种形式，

<form id="frmLogin" class="form-horizontal" role="form">
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="col-sm-8">
        <input type="text" name="MailOrUsername" title="Te poți loga introducând mail-ul sau numele de utilizator"  data-val="true" data-val-required="De ce apeși aiurea? Bagă ID." class="form-control" placeholder="Mail sau ID" />
    </div>
    <div class="col-sm-8">
        <input type="password" name="Password" title="Introdu parola asociată contului tău"  data-val="true" data-val-required="Bagă parola." class="form-control" placeholder="Parola" />
    </div>
    <input type="checkbox" name="RememberMe" />
    <span title="Bifând căsuța asta rămâi autentificat și după ce închizi browserul">Ține-mă minte</span>
    <input type="button" onclick="login()" id="btnLogin" style="margin-top: 7px; margin-bottom: -5px" value="Intră" class="btn btn-info" />
    <input type="button" onclick="login_hide()" />
    <img src="~/Images/loading.gif" id="loginLoading" />
</form>

没有这种行为，当我按下 Enter 键时没有任何反应。

Answer 1

表单提交是因为您的表单中只有 1 个输入（无需输入其他数据）。

将您的第一个表单更改为：

<form id="frmCode" style="display: inline-block">
    <input type="text" name="ConfirmationCode"/>
    <input type="text" name="ConfirmationCode2"/>
    <input type="button"/>
    <img src="~/Images/loading.gif" id="notificationLoading"/>
</form>

按Enter键时表单不会提交

如果您想禁用表单的提交功能，您可以像这样添加 onsubmit 事件处理程序：

<form id="frmCode" style="display: inline-block" onsubmit="return false;">
    <input type="text" name="ConfirmationCode"/>
    <input type="button"/>
    <img src="~/Images/loading.gif" id="notificationLoading"/>
</form>

Answer 2

您需要将用于提交表单的按钮类型设置为submit。

<input type="submit" ...>

<form id="frmLogin" class="form-horizontal" role="form">
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="col-sm-8">
        <input type="text" name="MailOrUsername" title="Te poți loga introducând mail-ul sau numele de utilizator"  data-val="true" data-val-required="De ce apeși aiurea? Bagă ID." class="form-control" placeholder="Mail sau ID" />
    </div>
    <div class="col-sm-8">
        <input type="password" name="Password" title="Introdu parola asociată contului tău"  data-val="true" data-val-required="Bagă parola." class="form-control" placeholder="Parola" />
    </div>
    <input type="checkbox" name="RememberMe" />
    <span title="Bifând căsuța asta rămâi autentificat și după ce închizi browserul">Ține-mă minte</span>
    <input type="submit" onclick="login()" id="btnLogin" style="margin-top: 7px; margin-bottom: -5px" value="Intră" class="btn btn-info" />
    <input type="button" onclick="login_hide()" />
    <img src="~/Images/loading.gif" id="loginLoading" />
</form>

关于the input element 和control types 的更多信息。

Answer 3

这是通常的浏览器行为，当用户在使用表单时按下回车键。

表单将提交，由于您的表单标签中没有操作属性，它将返回到当前 URL（附加任何表单字段/值）?ConfirmationCode=

正如“无处不在的开发者”评论中提到的那样；您正在使用 html 按钮 <input type="button"/> 而不是 html 提交按钮 <input type="submit" />。这将没有提交按钮的默认行为。

您的脚本作者可能不想使用 html 表单的默认行为。而是使用 javascript 来决定表单的行为方式。

我认为他们使用了一些 javascript 来阻止提交这样的表单；

How to prevent ENTER keypress to submit a web form?

Answer 4

第一个表单是遵循默认浏览器规则的简单表单。规则是按回车表示点击提交按钮。

<input type="button"/>

above 不是一个有效的提交按钮，所以浏览器提交了表单。
在第二种情况下，情况就不同了。

 <input type="submit" onclick="login()" id="btnLogin" style="margin-top: 7px; margin-bottom: -5px" value="Intră" class="btn btn-info" />

这是一个有效的提交按钮，因此在按下回车键时，浏览器会单击该按钮，该按钮会立即调用 JavaScript 函数“login()”。现在它必须在代码中执行阻止表单提交的操作。可能类似于“return false;”。所以表单不会提交。

Answer 5

You can try this. it works

<form method="post" action="yourpage.html">
<input type="text" name="name" class="inputbox" />
<button type="submit" id="btn1">Submit</button>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
</script>
<script>
$(".inputbox").on('keyup', function (e) {
 if (e.keyCode === 13) {
    $("#btn1").click();
 }
});
</script>