javascript Jquery：如何在按下回车键或点击按钮时触发点击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22868866/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery: how to trigger click event on pressing enter key or clicking button
提问by user3498478
I have a button that triggers a jquery event but only if the button is clicked. Is it possible to make it work if it is clicked or the return key is used?
我有一个触发 jquery 事件的按钮，但前提是该按钮被点击。如果单击或使用返回键，是否可以使其工作？
$(document).ready(function () {
var zipCodes = [60538, 60504];
$("#buttontest").click(function () {
var zipIndex = zipCodes.indexOf(parseInt($("#full_day").val()));
$("#zipMessage > div").hide("fast");
var zipId = zipIndex > -1 ? zipCodes[zipIndex] : "Error";
$("#zip" + zipId).show("fast");
});
});
Here is a working example; http://jsfiddle.net/7SPGh
这是一个工作示例；http://jsfiddle.net/7SPGh
回答by canon
As long as the button has focus, enterwill trigger the click event. I think you mean you'd like to trigger a click if enteris pressed while the textboxhas focus...
只要按钮有焦点，enter就会触发点击事件。我想你的意思是你想触发点击，如果enter在文本框有焦点时按下......
So, add a keydown handler to the textbox (fiddle):
因此，向文本框 ( fiddle)添加一个 keydown 处理程序：
$("#full_day").keydown(function(e){
if(e.which === 13){
$("#buttontest").click();
}
});
回答by Laszlo Korte
You could wrap the input and the button into a form element an listen for the submit event:
您可以将输入和按钮包装到表单元素中以监听提交事件：
<form id="form">
<input type='text' id="full_day"/>
<input type='submit' id="buttontest" value="Enter Zip Code"/>
</form>
$("#form").submit(function(e){
e.preventDefault();
// ...
});
Edit: type must be changed from button to submit to trigger the submit event.
编辑：类型必须从按钮更改为提交以触发提交事件。
回答by bitoiu
Picking up your example, this is the solution: http://jsfiddle.net/7SPGh/7/
拿起你的例子，这是解决方案：http: //jsfiddle.net/7SPGh/7/
$(document).ready(function(){
var zipCodes = [60538,60504];
$("#buttontest").click(function(){
var zipIndex = zipCodes.indexOf(parseInt($("#full_day").val()));
$("#zipMessage > div").hide("fast");
var zipId = zipIndex > -1 ? zipCodes[zipIndex] : "Error";
$("#zip"+zipId).show("fast");
});
$("#full_day").keypress(function(e) {
if(e.which == 13) {
alert('You pressed enter!');
}
});
});
回答by Trim Kadriu
Here is your working example:
这是您的工作示例：
Bind this in your element that you want to trigger the button click with Enter key Press
将此绑定到您要使用 Enter 键触发按钮单击的元素中 Press
$('body').bind('keypress',function (event){
if (event.keyCode === 13){
$("#buttontest").trigger('click');
}
});
回答by Jonathan Cohlmeyer
To improve upon canon's answer, you can bind to the key up or down event using jQuery's on event and look for the return key. Then you can check if an item that you want to trigger the click event on is in focus. Here I have used the hasClass to check if it is an appropriate item. Then you can trigger the click event on the item in focus.
为了改进佳能的答案，您可以使用 jQuery 的 on 事件绑定到 key up 或 down 事件并查找返回键。然后，您可以检查要触发单击事件的项目是否处于焦点。在这里，我使用了 hasClass 来检查它是否是合适的项目。然后您可以触发焦点项目上的点击事件。
$(window).on({
keyup: function (event) {
if (event.which === 13 && $(':focus').hasClass('item')) {
$(':focus').trigger('click');
}
}
});
回答by Scottyzen
Try creating listeners for both key presses and mouse clicks:
尝试为按键和鼠标点击创建监听器：
function myFunction(e){
if (e.which=='13' || e.type=='click'){
// Run your code here
}
}
$(document)
.on('click', '#buttontest', myFunction)
.on('keypress', this, myFunction);
回答by lennon626
Add another event listener for keypress. If the keycode is 13 (which is the return key), then run the function.
为按键添加另一个事件侦听器。如果键码为 13（即返回键），则运行该函数。
elem.addEventListener('keypress',function(){someFunc(e);}, false);
function someFunc(e){
if (e.keyCode === 13){
//run your code
}
This is pure javascript.
这是纯javascript。
回答by BFigueiredo
take a look at this discussion
看看这个讨论
$('#full_day').keypress(function(e) {
if(e.which == 13) {
jQuery(this).blur();
jQuery('#buttontest').trigger("click");
}
});
