Javascript 停止使用“输入键”重新加载页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8866053/
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
Stop reloading page with 'Enter Key'
提问by John R
I have a search box at the top of page that makes an ajax call when a user hits the adjacent button. I am trying to update the input tag so that when a user hit the 'enter' key, the apropriate JavaScript takes place withoutreloading the page. The problem is that the page keeps reloading. Here is my latest attempt:
我在页面顶部有一个搜索框，可以在用户点击相邻按钮时进行 ajax 调用。我正在尝试更新输入标签，以便当用户点击“输入”键时，无需重新加载页面即可执行适当的 JavaScript 。问题是页面不断重新加载。这是我最近的尝试：
$("searchText").bind('keyup', function(event){
if(event.keyCode == 13){
event.preventDefault();
$("#buttonSrch").click();
return false;
}
});
<input type='search' id='searchText' />
<input type='button' id='buttonSrch' onclick="search(document.getElementById('searchText'))" value='Search' />
采纳答案by icktoofay
Don't bind to the inputs; bind to the form. Assuming the formhas an ID of searchForm:
不要绑定到inputs; 绑定到form. 假设 的formID 为searchForm：
$("#searchForm").submit(function() {
search($("#searchText").get(0));
return false;
});
It can also be done with plain JavaScript:
也可以使用纯 JavaScript 来完成：
document.getElementById('searchForm').addEventListener('submit', function(e) {
search(document.getElementById('searchText'));
e.preventDefault();
}, false);
回答by ShankarSangoli
You are missing #in the selector. Try this
您#在选择器中丢失了。尝试这个
<input type='text' id='searchText' />
JS
JS
$("#searchText").bind('keyup', function(event){
if(event.keyCode == 13){
event.preventDefault();
//$("#buttonSrch").click();
search(this.value);
}
});
回答by opp
I know its a little late but I ran into the same problem as you. It worked for me using "keypress" instead of bind.
我知道它有点晚了，但我遇到了和你一样的问题。它使用“按键”而不是绑定对我有用。
$('#searchText').keypress(function (e) {
if (e.which == 13) {
e.preventDefault();
//do something
}
});
回答by vijayscode
Add onSubmit="return false;"on your form tag
添加onSubmit="return false;"您的表单标签
<form onSubmit="return false;">
/* form elements here */
</form>`
回答by Fresheyeball
$('#seachForm').submit(function(e){
e.preventDefault();
//do something
});
回答by ViPuL5
Just use the "action" attribute in <form>tag.
Like this
只需在<form>标签中使用“action”属性。像这样
<form action="#"> // your content </form>
回答by LeeF
You could set the form action attribute to javascript:void(0); that way the form doesn't post/get so the page wont refresh.
您可以将表单操作属性设置为 javascript:void(0); 这样表单就不会发布/获取，因此页面不会刷新。
$(document).ready(function () {
$('#form1').attr('action', 'javascript:void(0);');
});
回答by Kremena Lalova
This is what ended up working for me. Please note that my struggle was to find the object that triggered the form submit:
这就是最终为我工作的原因。请注意，我的努力是找到触发表单提交的对象：
$('#missingStaff').submit(function (e) {
e.preventDefault();
var comment = $(document.activeElement)[0];
submitComments(comment);
});
});
回答by Davy8
Does your JS execute immediately or on document ready? If it's not in a document ready the button won't exist at the time you're trying to call bind.
您的 JS 是立即执行还是在文档准备好时执行？如果它不在准备好的文档中，则在您尝试调用bind.
