如何在接收“Enter”鍵時阻止表單輸入重新加載頁面

Question

我有一個如下的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>

Answer 1

將表單設置為使用javascript和“return false”。 之后，您可以使用其他功能進行實際提交。

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

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

Answer 2

由於已有普通的舊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

Answer 3

您可以使用以下代碼來阻止enter鍵提交表單。

<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找到了它。該鏈接顯示了當輸入字段是文本字段時如何執行此操作。 我刪除了那部分，它將在所有字段上阻止它。

Answer 4

這有助於您避免提交表單。

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

如果不需要表單提交，請嘗試刪除表單並根據需要使用Ajax。

Answer 5

您將不得不使用Ajax以異步方式提交表單 - http://www.w3schools.com/ajax/default.asp否則停止表單提交非常簡單：

$("#yourForm").submit(e){
  e.preventDefault();
}