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

将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 2

您只是将事件处理程序绑定到#submit元素。但是不会在该元素上引发按键事件。

相反，您必须绑定到文档：

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

在处理程序功能中，您可以检查按下了哪个键并对其进行操作。

Answer 3

将事件绑定到表单输入字段：

$(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

您的代码偶像同时触发事件'click'和'Key press'，但是这里的捕获是您使用提交按钮绑定'keypress'事件，该按钮只会触发输入按钮而不是字符或数字键，因此您或者需要将按键绑定到输入类型或文档本身以执行操作而不是按钮类型

非字符键也不会引发KeyPress事件;但是，非字符键确实会引发KeyDown和KeyUp事件。

快乐编码

输入/按键上的Jquery无法正常工作

4 个答案: