使用"Enter Key"停止重新加载页面

Question

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

Answer 1

不要绑inputs; 绑定到form.假设formID为searchForm:

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

试试看.

它也可以用纯JavaScript完成:

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

Answer 2

#选择器中缺少您.试试这个

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

JS

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

Answer 3

我知道它有点晚了,但我遇到了和你一样的问题.它对我来说使用"keypress"而不是bind.

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

Answer 4

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

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

Answer 5

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

Answer 6

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

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