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

Question

我有一个 HTML5 表单，内含一个 range 输入框和一个 number 输入框，并使用 Bootstrap3 进行样式设计。这两个输入框是链接在一起的，无论我改变哪一个输入框中的值，另一个输入框都会随之更新。

然而，当我更改 number 输入框中的值并按下回车键时，整个网页就会重新加载，导致所有通过 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>

- thor

---

感谢所有帮助过我的人。我选择了 return false 的解决方案，因为它很简短。但其他方法也可能有效。 - thor

Answer 1

将表单提交设置为使用JavaScript和"return false"。之后，您可以使用另一个函数来执行实际的提交。

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

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

- Will

---

请使用preventDefault()代替return false。 - Velimir Tchatchevsky

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

- Bhaskara

---

应该使用preventDefault()而不是return false。 - Velimir Tchatchevsky

@VelimirTchatchevsky 使用 preventDefault() 对我没有任何作用，而使用 return false 至少可以完全阻止表单提交。 - MrDysprosium

Answer 3

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

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

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

- rajuGT

Answer 4

你需要使用Ajax来异步提交表单 - http://www.w3schools.com/ajax/default.asp。否则，阻止表单提交也很简单：

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

- Velimir Tchatchevsky

---

这听起来好像是OP根本不想让表单提交。 - Paul Roub

请注意，如果需要处理此类编程问题，最干净的方法是使用preventDefault()。 - Velimir Tchatchevsky

为什么要踩？e.preventDefault()不会完全阻止表单的提交吗？ - Velimir Tchatchevsky

Answer 5

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

<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找到了它。该链接展示了如何在输入字段为文本字段时禁用回车键。我删除了那部分，现在它将在所有字段上起作用。

- markbernard