使用 jQuery 按下回车键时单击链接

Posted 2023-02-22

【中文标题】使用 jQuery 按下回车键时单击链接

【英文标题】：Clicking a link when enter key is pressed using jQuery

【发布时间】：2010-12-21 12:17:42

【问题描述】：

我正在努力做到这一点，当用户在文本框中并按下回车键时，它与单击链接相同，在这种情况下，它应该将他们带到另一个页面。这就是我所拥有的，但它不起作用。

代码

//jQuery 
$(document).ready(function() 

  //if focus is in the input box drivingSchoolInput
  $("#drivingSchoolInput").live("click", function() 

    //if enter key is pressed
    if(e.keyCode == 13) 

        //click the button and go to next page
        $("#button1").click();
           
  );   
);

标记

<form>      
  <div class="formDiv">
    <label for="City">Search by Driving School</label>
    <span class="inputBox"><input type="text" name="City" class="input" id="drivingSchoolInput" /></span>
  </div>

  <h4 class="submitButton"><a href="school.html" id="button1">Submit</a></h4>     
</form>

【参考方案1】：

写一个小的jQuery插件：

jQuery.fn.enter = function(callback) 
   if(!callback) 
      //don't attach if we have garbage.
      return;
   

   $(this).keydown(function(e) 
       var ev = e || event;
       if(ev.keyCode == 13) 
          callback();
          return false;
       
   ); 
;

用法：$(element).enter(callback_func);

我希望这会有所帮助。

【参考方案2】：

看看这个：jQuery Event Keypress: Which key was pressed?

我将在此处合并来自 post 的代码：

$('#searchbox input').bind('keypress', function(e) 
 var code = e.keyCode || e.which;
 if(code == 13)  //Enter keycode
   //Do your stuff + form submit
 
);

PS：我从未测试过它，但它“应该”工作。 :P

【讨论】：

问题是我不知道怎么让它转到下一页。

试过了，还是不行 $("#drivingSchoolInput").bind('keypress', function(e) var code = e.keyCode || e.which; if(代码 == 13) window.location = "google.com";

【参考方案3】：

这段代码有几个主要问题...

第一个pygorex1 caught：如果你想引用它，你需要指定事件参数......

第二个在您的代码的同一区域：您正试图在click 事件的处理程序中检查关键事件！

第三个可以在这一行找到：

            //click the button and go to next page
            $("#button1").click();

...什么都不做，因为您在该链接上没有事件处理程序，并且 jQuery's click() function does not trigger the browser's default behavior!

请尝试以下方法：

// if a key is pressed and then released
$("#drivingSchoolInput").live("keyup", function(e) 

  // ...and it was the enter key...
  if(e.keyCode == 13) 

    // ...navigate to the associated URL.
    document.location = $("#button1").attr('href');
                 
);

【讨论】：

document.location = $("#button1").attr('google.com');这仍然没有用。你有机会测试它吗？

为什么要将“google.com”传递给attr() 函数？没有具有该名称的属性，并且无论如何您都想要href 属性的值...

【参考方案4】：

我想做类似的事情，所以在阅读了上面 David K Egghead 的建议后，我想出了这个，即使在按下 enter 时也会触发“点击”。也可以用来“点击”按钮！

$(document).keypress(function(event)if(event.keyCode==13)$('.save_icon').trigger("click"););

【参考方案5】：

这一行需要e:

$("#drivingSchoolInput").live("click", function(e) 

【讨论】：

另外，它需要不使用click 事件来测试输入字段中的键盘事件...

为什么需要e？ javascript 现在检查函数的数量吗？

@ndim：需要e，因为他在函数中引用了e。

@Shog9：哎呀。需要更多的咖啡。

哈！不敢相信我错过了点击处理程序。

【参考方案6】：

我有一个非常相似的问题。但是，我无法找到完整的解决方案。

我只是想将相同的函数附加到 2 个不同的元素上，并使用 2 种不同的方法来执行它。例如，Tom 想要什么：单击链接，或在输入字段中按 ENTER，然后执行相同的功能（即导航到另一个页面）。

Jacob Relkin 为“输入”按键提出了一个好主意。我已将其包含在下面的代码中：

所以基于以下简单标记：

<div>
  <label for="myInput">Type Stuff</label>
  <input id="myInput" type="text" value="" />
  <a id="myButton" href="http://google.com">Click me!</a>
</div>

使用这个 JavaScript (JQuery) 代码：

//this is the plugin Jacob Relkin suggested
(function($) 
$.fn.enter=function(callback)
    this.keyup(function(e) 
        var ev = e || event;
        if(ev.keyCode == 13) 
            callback();
            return false;
        
    ); 
;
)(jQuery);

$(document).ready(function()

    var fnDoStuff = function() 
        //insert code here
        //for this example I will complete Tom's task
        document.location.href = $("#myButton").attr('href');
    ;

    $('#myInput').enter(fnDoStuff);
    $('#myButton').click(fnDoStuff);

 );

通过这种方式，您可以将相同的功能附加到任意数量的元素上，进行任何类型的交互。

【参考方案7】：

我在 asp.net LinkBut​​ton 中使用了以下内容

        $('#drivingSchoolInput').keypress(function (event) 
            if (event.keyCode == 13) 
                eval($('#button1').attr('href'));
            
        );

我在标题上也有一个允许搜索的表格，所以我需要添加另一个步骤来禁用表格发布。

        $('#drivingSchoolInput').keypress(function (event) 
            if (event.keyCode == 13) 
                $('#header1_ButtonTerm').attr('disabled', 'disabled'); <-- hack added to kill FORM POST
                eval($('#button1').attr('href'));
            
        );