如何防止表单输入在接收“Enter”键时重新加载页面

How to prevent form input to reload a page when receiving `Enter` key

本文关键字：新加载 加载 输入 表单 何防止 Enter      更新时间：2023-09-26

我有一个HTML5表单，如下所示，它使用Bootstrap3进行样式设置，并包含一个range输入和一个number输入。两个输入是链接的，因此每当我更改range值时，number输入都会更新，反之亦然。

困扰我的是，当我更改number输入值并按Enter键时，整个网页会重新加载，这会清除使用 JavaScript 加载到页面中的所有其他数据。

我的问题是，如何更改 HTML/代码以禁用此重新加载行为？

谢谢。

    <form class="form-horizontal">
        <div class="form-group">
            <div class="col-xs-6">
                <input type="range" class="policy_slider" name="demandRange" min="0.1" max="10" value="1" oninput="this.form.demandInput.value=this.value"/>
            </div>
            <div class="col-xs-1">
                <input type="number" name="demandInput" min="0.1" max="10" value="1" step="any" oninput="this.form.demandRange.value=this.value"/>
            </div>
        </div>
    </form>

将表单提交设置为使用 javascript 并"返回 false"。 之后，您可以使用另一个函数进行实际提交。

<form class="form-horizontal" onSubmit="return false;">

JSFIDDLE： http://jsfiddle.net/biz79/m3veL3uh/

由于已经有普通的旧JS解决方案，我的答案是基于JQuery的。此外，Bootstrap JS需要Jquery。所以试试这个： 

$("form").keypress(function(e) {
  //Enter key
  if (e.which == 13) {
    return false;
  }
});

如果您的页面中有多个表单，请使用以下内容： 

 $("#form_id").keypress(function(e) {
      //Enter key
      if (e.which == 13) {
        return false;
      }
    });

其中form_id是指定给表单的 ID，如下所示：<form id="form_id">...</form>

友情提供：http://www.paulund.co.uk/how-to-disable-enter-key-on-forms

您可以使用以下代码来阻止回车键提交表单。

<script type="text/javascript">
function stopRKey(evt) {
  var evt = (evt) ? evt : ((event) ? event : null);
  var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
  if ((evt.keyCode == 13))  {return false;}
}
document.onkeypress = stopRKey;
</script>

我在 http://webcheatsheet.com/javascript/disable_enter_key.php 找到了它 该链接显示了当输入字段为文本字段时如何执行此操作。我删除了该部分，它将在所有字段上阻止它。

这将帮助您避免提交表单。

<form class="form-horizontal" onsubmit='return false'>

如果不需要表单提交，请尝试删除表单并在需要时使用 Ajax。

您必须使用 Ajax 异步提交表单 - http://www.w3schools.com/ajax/default.asp否则，停止表单提交非常简单：

$("#yourForm").submit(e){
  e.preventDefault();
}
相关文章：