接收“ 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并“返回false”。之后，您可以使用另一个功能进行实际提交。

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

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