Javascript 停止使用'重新加载页面；输入键'；

我在页面顶部有一个搜索框，当用户点击相邻按钮时，它会发出ajax调用。我正在尝试更新输入标记，以便当用户按下“enter”键时，可以在不重新加载页面的情况下执行适当的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' />

$（“searchText”）.bind（'keyup'，函数（事件）{
如果（event.keyCode==13）{
event.preventDefault（）；
$（“#按钮”）。单击（）；
返回false；
}
});

选择器中缺少

#

。试试这个

<input type='text' id='searchText' />

---

不要绑定到

输入

s；绑定到

表单

。假设

表单

的ID为

搜索表单

：

$("#searchForm").submit(function() {
    search($("#searchText").get(0));
    return false;
});

也可以使用普通JavaScript完成此操作：

document.getElementById('searchForm').addEventListener('submit', function(e) {
    search(document.getElementById('searchText'));
    e.preventDefault();
}, false);

---

您的JS是立即执行还是在文档准备就绪时执行？如果文档中没有该按钮，则在您尝试调用

bind

时，该按钮将不存在，只需使用

标记中的“action”属性即可。

 $('#seachForm').submit(function(e){
      e.preventDefault();
      //do something
 });

像这样

<form action="#">   // your content     </form>

//您的内容

我知道有点晚了，但我遇到了和你一样的问题。对我来说，用“按键”代替绑定很有效

$('#searchText').keypress(function (e) {                                       
       if (e.which == 13) {
            e.preventDefault();
            //do something   
       }
});

---

您可以将表单操作属性设置为javascript:void（0）；这样，表单不会发布/获取，因此页面不会刷新

$(document).ready(function () {
  $('#form1').attr('action', 'javascript:void(0);');
});

---

这就是我的工作。请注意，我的努力是找到触发表单提交的对象：

$('#missingStaff').submit(function (e) {
e.preventDefault();
var comment = $(document.activeElement)[0];
submitComments(comment);

}))

在表单标签上添加

onSubmit=“return false；”

<form onSubmit="return false;">
/* form elements here */
</form>`

/*这里的表单元素*/
`

您只需添加以下内容：

<form @submit.prevent="search">

---

---

很好，我竖起大拇指。不幸的是，我纠正了这个错误，它仍然不起作用。实际上，以上是几次尝试中的最新尝试。

搜索

输入类型没有问题。它是在HTML5中添加的。@icktoofay-谢谢你，我没有意识到它。@ShankarSangoli-我尝试过它（还有一些变体）。仍然不起作用。请注意，

return false

已经包含了

preventDefault（）

。您的

search（）

函数是否也有

return false

？请不要在答案指出的时候编辑掉问题中的错误-这会使答案看起来是错误的：）福吉，我尝试添加了“return false；”你建议的搜索功能，但页面仍然会重新加载。我认为你的问题只适用于标签内的情况。如果不包含标记，“enter”不会重新加载页面。此外，jquery“return false”不执行event.preventDefault（）。因此，您不需要两者都使用。请参阅：Hmmm，在以前的版本中，提交和输入字段从未包含在表单标记中。也许这就是问题所在。我会尝试…我尝试过。。。没有成功$（“#searchForm”）.submit（函数（）{search（$（“#searchText”）.get（0））；返回false；}）； ... @约翰：我在回答中添加了一个关于JSFIDLE的例子。它对我有效。本地，no:$（document）.ready（function（）{function search（input）{$（''））.text（'search for'+input.value.）.appendTo（'body'）；}$（“#searchForm”）.submit（function（）{search（$（“#searchText”）.get（0））；return false；}@John John:您的本地示例缺少一个

）在脚本的末尾。按原样，它看起来是这样的：
$（document）.ready（function（）{}
。一旦这一点得到解决，它对我来说就行了。我同意@icktoofay，但这在imho中是一种更干净的方式。你应该绑定到元素。如果你的页面上没有表单元素，我质疑为什么点击enter键会产生影响，因为浏览器将不知道在哪里发布。在我的情况下，我绝对必须防止表单被替换如果用户点击enter，则提交，因为引擎会将其重定向到“谁知道在哪里”（Google Apps脚本HTML模板）。
preventDefault（）
完成了此操作。您甚至可以将其概括为：$（'form'）。提交（函数（e）{e.preventDefault（）}）；这仍然会使页面重新加载。这一点很有帮助。谢谢：我尝试了这种方法，但我的表单仍在提交，页面正在刷新。甚至不必听关键事件。仅此一点就解决了问题。+1我在一个页面上遇到了同样的问题，该页面有很多Bootstrap 4表单，这些表单没有type=“submit”按钮，而是有type=“button”按钮。当光标位于这些表单中的任何输入文本字段内时，每当按下enter键时，页面就会重新加载。添加
onSubmit=“return false；”的解决方案
到表单标签解决了此问题。请始终将答案放在上下文中，而不是仅粘贴代码。有关更多详细信息，请参阅：@PareshMangukiya一个小提示：在注释中，编写
[answer]
将自动扩展到该链接。示例：
$("searchText").keypress(function(event){ 
  if(event.keyCode == 13){ 
    $("#buttonSrch").click(); 
    return false;
  }
});

<form @submit.prevent="search">

async search() {
  let yuyu = document.getElementById('search').value
  console.log('lsd', yuyu)
  try {
    let newRecipes = await this.$axios.$get(
      `/api/videosset/?user=&id=&title=${yuyu}&price=&category=`
    )
    this.$store.commit('CHANGE_NAV_LAYOUT', newRecipes)
  } catch (e) {
    console.log(e)
  }
},