如何按Enter鍵而不刷新頁面？

Question

我目前正在研究Wiki搜索項目，但遇到了一個問題，我一直無法在stackoverflow上找到答案。 按下Enter鍵時，我試圖執行XMLHttp請求，但無法使其正常工作。 即使我嘗試了keyup，keydown，submit和bind方法，它也始終刷新頁面。

HTML代碼：

         <form class="form-search ngen-search-form" action="" method "get">
         <input type="text"name="q"id = "search-input"class="form-search 
          input"placeholder="Search keywords..."dir="ltr">
         <span class="glyphicon glyphicon-search form-search-submit" 
           id="search-trigger"aria-hidden="true"></span>
         </form>

JS代碼：

$(document).ready(function(){
  //clicking search button expands search bar
  $('#search-trigger').on('click',function(e){
    e.preventDefault();
    if(!$('#search-input').hasClass("search-input-open")){
      $('#search-input').addClass('search-input-open');
    }else{
      send();
    }
  });
  //--problem here-- enter button refreshes page instead of executing js
  $("#search-input").keyup(function (e) {
          if(e.keyCode==13){
            console.log('works');
            send();
          }
         });
//click away from search form causes search bar to close
  $(document).on('click', function(e) {
    e.preventDefault();
    if(!$(e.target).is('#search-trigger')&&!$(e.target).is('#search-input')) {
      $('#search-input').removeClass('search-input-open');
    }
  });
  //request function to wikipedia API
  function send(){
    var xhr = new XMLHttpRequest();
    //add precautionary if nothing entered
    var searchTerm = document.getElementById('search-input').value;
    var string = "http://en.wikipedia.org/w/api.php?action=opensearch&origin=*&search=" + searchTerm + "&formatversion=2&format=json";
    xhr.open('GET',string);
    xhr.onload = function(){
      console.log(xhr.responseText);
    };
    xhr.send();
  }
});

Answer 1

使用e.preventDefault()防止頁面刷新。

 $("#search-input").keyup(function (e) {
      if(e.keyCode==13){
        e.preventDefault();
        console.log('works');
        send();
      }
     });

Answer 2

這是因為您的form正在提交。 使用下面的代碼來防止它。

$("form").submit(function(e){
    e.preventDefault();
}); 

 $(document).ready(function(){ //clicking search button expands search bar $('#search-trigger').on('click',function(e){ e.preventDefault(); if(!$('#search-input').hasClass("search-input-open")){ $('#search-input').addClass('search-input-open'); }else{ send(); } }); $("form").submit(function(e){ e.preventDefault(); }); //--problem here-- enter button refreshes page instead of executing js $("#search-input").keyup(function (e) { if(e.keyCode==13){ console.log('works'); send(); } }); //click away from search form causes search bar to close $(document).on('click', function(e) { e.preventDefault(); if(!$(e.target).is('#search-trigger')&&!$(e.target).is('#search-input')) { $('#search-input').removeClass('search-input-open'); } }); //request function to wikipedia API function send(){ var xhr = new XMLHttpRequest(); //add precautionary if nothing entered var searchTerm = document.getElementById('search-input').value; var string = "https://en.wikipedia.org/w/api.php?action=opensearch&origin=*&search=" + searchTerm + "&formatversion=2&format=json"; xhr.open('GET',string); xhr.onload = function(){ $('#result').text(xhr.responseText); }; xhr.send(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="form-search ngen-search-form" action="" method "get"> <input type="text"name="q"id = "search-input"class="form-search input"placeholder="Search keywords..."dir="ltr"> <span class="glyphicon glyphicon-search form-search-submit" id="search-trigger"aria-hidden="true"></span> </form> <div id="result"></id> 

Answer 3

您可以通過以下方式禁用Enter鍵

1. 通過使用html屬性。

    <form ... onkeypress="return event.keyCode != 13;"> 

2. 通過使用Jquery。

    $(document).on("keypress", "form", function(event) { return event.keyCode != 13; });