使用“输入键”停止重新加载页面答案

【问题标题】：Stop reloading page with 'Enter Key'使用“输入键”停止重新加载页面
【发布时间】：2012-01-14 22:54:17
【问题描述】：

我在页面顶部有一个搜索框，当用户点击相邻按钮时会进行 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' />

【问题讨论】：

你的search()函数也有return false吗？
请不要编辑问题中的错误，因为答案会指出它们 - 这会使答案看起来错误:)
fudgey，我尝试添加'return false;'按照您的建议转到搜索功能，但页面仍会重新加载。
我认为你的问题只适用于在
标签内。如果不包含

标签，'enter' 不会重新加载页面。此外，jquery 'return false' 执行 event.preventDefault()。所以你不需要两者。
见：jsfiddle.net/gabrieleromanato/eYzSX

标签： javascript jquery input

【解决方案1】：

不要绑定到inputs；绑定到form。假设form 的ID 为searchForm：

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

Try it out.

也可以使用纯 JavaScript 来完成：

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

【讨论】：

嗯，在以前的版本中，提交和输入字段从未在表单标签中。也许这就是问题所在。我会尝试...
我试过...没有成功。 $("#searchForm").submit(function() { search($("#searchText").get(0)); return false; }); ...
@John：我在 JSFiddle 上添加了一个示例来回答我的问题。它对我有用。
本地，没有： head>
@John：您的本地示例在脚本末尾缺少);。实际上，它看起来像这样：$(document).ready(function() { }。一旦解决了这个问题，它就对我有用。

【解决方案2】：

我知道这有点晚了，但我遇到了和你一样的问题。它使用“按键”而不是绑定对我有用。

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

【讨论】：

我尝试了这种方法，但我的表单仍在提交并且页面正在刷新。

【解决方案3】：

您在选择器中缺少#。试试这个

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

JS

$("#searchText").bind('keyup', function(event){ 
  if(event.keyCode == 13){ 
    event.preventDefault();
    //$("#buttonSrch").click(); 
    search(this.value);
  }
});

【讨论】：

很好，ShankarSangoli，我竖起大拇指。不幸的是，我纠正了这个错误，但它仍然不起作用。以上实际上是几次尝试中的最新一次。
search 输入类型没有任何问题。它是在 HTML5 中添加的。
@icktoofay - 谢谢你，我不知道。
@ShankarSangoli - 我试过了（还有一些变体）。还是不行。
请注意return false 已经包含preventDefault()。

【解决方案4】：

在您的表单标签上添加onSubmit="return false;"

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

【讨论】：

甚至不必听关键事件。仅此一项就解决了。+1
我在有很多 Bootstrap 4 表单的页面上遇到了同样的问题，这些表单没有 type="submit" 按钮，而是有 type="button" 按钮。当光标位于这些表单内的任何输入文本字段内时，只要按下回车键，页面就会重新加载。这种将onSubmit="return false;" 添加到表单标签的解决方案解决了这个问题。

【解决方案5】：

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

【讨论】：

我同意@icktoofay，但这是一种更简洁的方式。您应该绑定到
元素。如果您的页面上没有表单元素，我质疑为什么按 Enter 会产生影响，因为浏览器将不知道在哪里发布。
在我的情况下，如果用户按 Enter 键，我绝对必须阻止提交表单，因为引擎会将其重定向到谁知道在哪里（Google Apps 脚本 HTML 模板）。 preventDefault() 成功了。
你甚至可以将其概括为：$('form').submit(function(e){e.preventDefault()});

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

只需在<form> 标签中使用“action”属性即可。像这样

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

【讨论】：

这仍然会使页面重新加载。

【解决方案8】：

$("searchText").keypress(function(event){ 
  if(event.keyCode == 13){ 
    $("#buttonSrch").click(); 
    return false;
  }
});

【讨论】：

请始终将您的答案放在上下文中，而不仅仅是粘贴代码。详情请见：stackoverflow.com/help/how-to-answer
@PareshMangukiya 一个小提示：在 cmets 中，写入 [answer] 将自动扩展到该链接。示例：How to Answer

【解决方案9】：

您的 JS 是立即执行还是在文档就绪时执行？如果它不在文档中准备好，则在您尝试调用 bind 时该按钮将不存在。

【讨论】：

【解决方案10】：

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

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

});

【讨论】：

【解决方案11】：

你只需要添加这个：

<form @submit.prevent="search">

触发搜索的任何功能。当我按下该搜索按钮时，search() func 被触发。这就是为什么：@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)
  }
},

【讨论】：