Jquery:如何在按下Enter键时触发单击事件

195

我希望在按下回车键时执行按钮点击事件。

目前该事件没有触发。

如果可能,请帮我检查语法。

$(document).on("click", "input[name='butAssignProd']", function () {
   //all the action
});

这是我尝试在按下回车键时触发点击事件的方法。

$("#txtSearchProdAssign").keydown(function (e) {
  if (e.keyCode == 13) {
    $('input[name = butAssignProd]').click();
  }
});

你可能需要包含一个 return false 或者 e.preventDefault(); - geekchic
4
作为附注:e.keyCode不完全支持所有浏览器。请改用e.which - Hashem Qolami
4
在这种情况下,你应该使用 keyup 而不是 keypress 或者 keydownkeypress/keydown 事件会在按键被按住时连续触发:http://jsbin.com/uzoxuk/1/edit。 - Hashem Qolami
1
现代的方法是:e.key === 'Enter'(在所有现代浏览器甚至IE9+中都受支持)。我将在另外7年后回来发布新的“现代”技术。 - Dem Pilafian
15个回答

364

试试这个...

$('#txtSearchProdAssign').keypress(function (e) {
 var key = e.which;
 if(key == 13)  // the enter key code
  {
    $('input[name = butAssignProd]').click();
    return false;  
  }
});   

$(function() {

  $('input[name="butAssignProd"]').click(function() {
    alert('Hello...!');
  });

  //press enter on text area..

  $('#txtSearchProdAssign').keypress(function(e) {
    var key = e.which;
    if (key == 13) // the enter key code
    {
      $('input[name = butAssignProd]').click();
      return false;
    }
  });

});
<!DOCTYPE html>
<html>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <meta charset=utf-8 />
  <title>JS Bin</title>
</head>

<body>
  <textarea id="txtSearchProdAssign"></textarea>
  <input type="text" name="butAssignProd" placeholder="click here">
</body>

</html>


Find Demo in jsbin.com


4
如果需要在任何地方都能识别“回车”键按下,可以将 $('#txtSearchProdAssign') 替换为 $(document),并使用 $(document).keypress() 进行触发。请注意,翻译保持原文意思不变,同时确保通俗易懂。 - dave4jr
从可访问性的角度来看,这看起来有些值得怀疑。这是否一定能够在具有不同“选择”方法的所有设备上正常工作? - Jonny

33

试试这个

$('#twitterSearch').keydown(function(event){ 
    var id = event.key || event.which || event.keyCode || 0;   
    if (id == 13) {
        $('#startSearch').trigger('click');
    }
});

希望它能对您有所帮助

另请参阅 stackoverflow.com/keyCode vs which?


4
你的意思是 if((event.keyCode || event.which) == 13) 吗?是的,它完全支持跨浏览器,在 Firefox 中还支持 Tab 键。 - Hashem Qolami
根据APIevent.keyCode是多余的,只需使用event.which即可。 - konyak

16
$('#txtSearchProdAssign').keypress(function (e) {
  if (e.which == 13) {
    $('input[name = butAssignProd]').click();
    return false;  
  }
});

我还发现了如何通过按下“Enter”键提交表单,该问题全面地解决了大部分问题。


8
你已经接近成功了。不过你可以尝试以下方法:
$(function(){
  $("#txtSearchProdAssign").keyup(function (e) {
    if (e.which == 13) {
      $('input[name="butAssignProd"]').trigger('click');
    }
  });
});

我使用了trigger()来执行点击事件,并将其绑定在keyup事件上,而不是keydown事件上,因为click事件实际上由两个事件组成,即mousedownmouseup。因此,为了使事情尽可能与keydownkeyup相似。

这里有一个Demo


7

还有一个需要补充的内容:

如果你正在动态添加输入框,比如使用append(),那么你必须使用jQuery的on()函数。

$('#parent').on('keydown', '#input', function (e) {
    var key = e.which;
    if(key == 13) {
        alert("enter");
        $('#button').click();
        return false;
    }
});

更新:

一个更加高效的做法是使用 switch 语句。你可能会发现这样更加简洁明了。

标记:

<div class="my-form">
  <input id="my-input" type="text">
</div>

jQuery:

$('.my-form').on('keydown', '#my-input', function (e) {
  var key = e.which;
  switch (key) {
  case 13: // enter
    alert('Enter key pressed.');
    break;
  default:
    break;
  }
});

2
在我看来,对于单个条件使用switch语句是过度设计。 - alexia
比if语句更高效。 - Daniel Dewhurst
2
我不相信你。你能引用一下来源吗? - Rolf

4

这是我首选的解决方案。

    $("#text").keyup(function(event) {
        if (event.which === 13) {
            $("#submit").click();
        }
    });

超级简单,超级jQuery。


3

您是否尝试在按下“回车”键时模拟对按钮的单击操作?如果是,您可能需要使用trigger语法。

尝试更改:

$('input[name = butAssignProd]').click();

to

$('input[name = butAssignProd]').trigger("click");

如果这不是问题所在,那么请尝试再次查看您的键捕获语法,可以参考此文章中的解决方案:jQuery Event Keypress: Which key was pressed?


这个方法是前两种变体中 .on( "click", handler ) 的快捷方式,第三种变体则是 .trigger( "click" )。因此它们会完全相同。 - Capsule

3

只需在代码中包含preventDefault()函数即可。

$("#txtSearchProdAssign").keydown(function (e) 
{
   if (e.keyCode == 13) 
   {
       e.preventDefault();
       $('input[name = butAssignProd]').click();
   }
});

1
尝试这个。
<button class="click_on_enterkey" type="button" onclick="return false;">
<script>
$('.click_on_enterkey').on('keyup',function(event){
  if(event.keyCode == 13){
    $(this).click();
  }
});
<script>

1

Jquery:使用回车键触发按钮点击事件 尝试这个:

tabindex="0" onkeypress="return EnterEvent(event)"

 <!--Enter Event Script-->
    <script type="text/javascript">
        function EnterEvent(e) {
            if (e.keyCode == 13) {
                __doPostBack('<%=btnSave.UniqueID%>', "");
            }
        }
    </script>
    <!--Enter Event Script-->

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接