javascript 收到“Enter”键时如何防止表单输入重新加载页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27364438/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to prevent form input to reload a page when receiving `Enter` key
提问by tinlyx
I have a HTML5 form as follows, which is styled with Bootstrap3 and contains a rangeinput and a numberinput. The two inputs are linked so that whenever I change the rangevalue, the numberinput is updated and vice versa.
我有一个 HTML5 表单，如下所示，它使用 Bootstrap3 样式并包含一个range输入和一个number输入。这两个输入是相互关联的，因此每当我更改range值时，number输入都会更新，反之亦然。
What's bothering me is that when I change the numberinput value and hit the Enterkey, the whole web page reloads and this wipes out all other data loaded into the page with JavaScript.
困扰我的是，当我更改number输入值并按下Enter键时，整个网页都会重新加载，这会清除所有其他用 JavaScript 加载到页面中的数据。
My questions is, how can I change the HTML/code to disable this reloading behavior?
我的问题是，如何更改 HTML/代码以禁用此重新加载行为？
Thanks.
谢谢。
<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>
回答by Will
Set the form submit to use javascript and "return false". Afterwards, you can use another function to do the actual submit.
将表单提交设置为使用 javascript 并“返回 false”。之后，您可以使用另一个函数来进行实际提交。
<form class="form-horizontal" onSubmit="return false;">
JSFIDDLE: http://jsfiddle.net/biz79/m3veL3uh/
JSFIDDLE：http: //jsfiddle.net/biz79/m3veL3uh/
回答by Bhaskara
As there are already plain old JS solutions, my answer is based on JQuery. Also, Bootstrap JS requires Jquery. So try this:
由于已经有简单的旧 JS 解决方案，我的回答基于 JQuery。此外，Bootstrap JS 需要 Jquery。所以试试这个：
$("form").keypress(function(e) {
//Enter key
if (e.which == 13) {
return false;
}
});
If you have multiple forms in your page use this :
如果您的页面中有多个表单，请使用：
$("#form_id").keypress(function(e) {
//Enter key
if (e.which == 13) {
return false;
}
});
where form_idis the id specified to your form something like this: <form id="form_id">...</form>
form_id指定给您的表单的 id在哪里，如下所示：<form id="form_id">...</form>
Courtesy: http://www.paulund.co.uk/how-to-disable-enter-key-on-forms
礼貌：http: //www.paulund.co.uk/how-to-disable-enter-key-on-forms
回答by rajuGT
This will help you to avoid submitting form.
这将帮助您避免提交表单。
<form class="form-horizontal" onsubmit='return false'>
<form class="form-horizontal" onsubmit='return false'>
If form submit is not required, try to remove form and use Ajax if required.
如果不需要提交表单，请尝试删除表单并在需要时使用 Ajax。
回答by markbernard
You can use the folowing code to prevent the enter key from submitting the form.
您可以使用以下代码来防止输入键提交表单。
<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>
I found it at http://webcheatsheet.com/javascript/disable_enter_key.phpThe link shows how to do it when the input field is a text field. I removed that part and it will prevent it on all fields.
我在http://webcheatsheet.com/javascript/disable_enter_key.php找到了该链接显示了当输入字段是文本字段时如何执行此操作。我删除了那部分，它将在所有领域阻止它。
回答by Velimir Tchatchevsky
You'll have to use Ajax to submit the form asynchronous - http://www.w3schools.com/ajax/default.aspOtherwise to stop the form submit is pretty straight forward:
您必须使用 Ajax 异步提交表单 - http://www.w3schools.com/ajax/default.asp否则停止表单提交非常简单：
$("#yourForm").submit(e){
e.preventDefault();
}
