JQuery on enter/keypress not working

Question

Я пытаюсь создать простую область поиска, которая позволяет выполнять поиск на основе ключевого слова, которое вы вводите в поле ввода. Эта работа прекрасна, если вы нажмете кнопку «Отправить».

Я также хотел бы иметь возможность нажать клавишу Enter или Return, чтобы начать поиск. Я попытался использовать функцию .on, она работает только для кликов, но не успевает при вводе или нажатии. Любое понимание было бы очень полезно!

$(document).ready(function() { 

    //$("#gallery").empty();       
    $("#submit").on("click keypress",function (e) { 
       console.log($(this).text()); 
       console.log("e.which " +e.which); 
       console.log("e.type " +e.type); 

      if (e.which === 13 || e.type === 'click') {  
       if($("#term").val() !=""){ 
       //$("#gallery").empty();  
       /**********************/ 
       updatestatus(); 
       ajaxProcess(); 
       /**************************/  
       }else { 
        //$("#gallery").text("Please enter a keyword to search").fadeOut(2500); 
        alert("Please enter a keyword to search"); 
       } 
      } 
    }); 

    $("#clear").click(function(){ 
      $("#gallery").empty();     
    }); 

}); 

HTML

<form> 
<input type="text" value="" id="term" /> 
<input id="submit" type="button" value="Go"> 
<input type="reset" id="clear" value="Clear" /> 
</form> 

Answer 1

Вы только связывание обработчика событий к элементу #submit. Но события клавиш не возникают в этом элементе.

Вместо этого вы должны привязать к документу:

$(document).keypress(function(e) { 
    switch (e.keyCode) { 
     case 13: // RETURN 
      ... 
    } 
} 

В функции обработчика, то вы можете проверить, какая клавиша была нажата и действовать на нем.

Answer 2

Bind a onsubmit обработчик события в форму. Поэтому, когда вы нажимаете на клавишу enter во входном тексте, будет отправлен запрос формы, который будет выполнять ваш вызов ajax.

$("#submit").on("click keypress",function (e) { 
 
     
 
      if($("#term").val() !=""){ 
 
      /* 
 
      updatestatus(); 
 
      ajaxProcess(); 
 
      */ 
 
      }else { 
 
       alert("Please enter a keyword to search"); 
 
      } 
 
}); 
 

 
$("#clear").click(function(){ 
 
    $("#gallery").empty();     
 
}); 
 

 
    $("form").submit(function(e){ 
 
       $("#submit").trigger('click'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form> 
 
<input type="text" value="" id="term" /> 
 
<input id="submit" type="button" value="Go"> 
 
<input type="reset" id="clear" value="Clear" /> 
 
</form>

Или связать keypress события в текстовом поле input и проверить event.which==13, чтобы проверить, если его ввести ключ и сделать процесс.

$("#submit").on("click keypress",function (e) { 
 
     
 
      if($("#term").val() !=""){ 
 
      /* 
 
      updatestatus(); 
 
      ajaxProcess(); 
 
      */ 
 
      }else { 
 
       alert("Please enter a keyword to search"); 
 
      } 
 
}); 
 

 
$("#clear").click(function(){ 
 
     $("#gallery").empty();     
 
}); 
 

 
    $("input#term").on("keypress", function(e){ 
 
    if (e.which === 13) { 
 
     $("#submit").trigger('click'); 
 
    } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form> 
 
<input type="text" value="" id="term" /> 
 
<input id="submit" type="button" value="Go"> 
 
<input type="reset" id="clear" value="Clear" /> 
 
</form>

Answer 3

Bind события для формы ввода поля по себе:

$(document).ready(function() { 

    $("#submit").on("click",function() { 
     // After submit stuff: 
     updatestatus(); 
     ajaxProcess(); 
    }); 

    $("form input").keypress(function(e){ 
     if (e.which === 13) { 
      $("#submit").trigger('click'); 
     } 
    }); 

}); 

Answer 4

Вашего код idoes огнь и события, «Клик» и «Нажмите клавишу», но улов здесь у вас есть связанное событие «keypress» с кнопкой отправки, которая будет запускаться только при нажатии кнопки ввода, а не в символьные или цифровые клавиши, так что вам нужно либо привязать нажатие клавиши ввода к типу ввода, либо самому документу для выполнения вашей операции, а не кнопку тип

Также событие KeyPress не возбуждается нехарактерными ключами; однако нехарактерные ключи действительно увеличивают события KeyDown и KeyUp.

Счастливый Coding