jQuery 如何使用jquery检测DIV中是否按下了Enter键？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16812061/
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
How to detect if Enter Key was pressed within a DIV using jquery?
提问by Baig
I have successfully hooked the EnterKey event at the document level as following:
我已经成功地在文档级别挂钩了 EnterKey 事件，如下所示：
$(document).keypress(function (e) {
if (e.which == 13) {
alert('You pressed enter!');
}
});
But, I am unable to hook the EnterKey event on a Div with id "myDiv".
但是，我无法在 ID 为“myDiv”的 Div 上挂钩 EnterKey 事件。
<div id="myDiv"></div>
$("#myDiv").keypress(function (e) {
if (e.which == 13) {
alert('You pressed enter!');
}
});
Is it possible to detect an EnterKey press within a Div? Actually, the Div contains some input/select controls which are used to filter the content of a Grid. I want to hook the EnterKey event so that when the EnterKey is pressed I can filter the Grid.
是否可以检测 Div 中的 EnterKey 按下？实际上，Div 包含一些用于过滤 Grid 内容的输入/选择控件。我想挂钩 EnterKey 事件，以便在按下 EnterKey 时可以过滤网格。
EDIT:Please note that I have inputs within the div(I've intentionally not shown them here). I don't want to hook the event manually for each of the input control within the Div. Also, I am assuming that when user presses EnterKey at least one input control shall have focus.
编辑：请注意，我在 div 中有输入（我故意不在这里显示它们）。我不想为 Div 中的每个输入控件手动挂钩事件。此外，我假设当用户按下 EnterKey 时，至少有一个输入控件应具有焦点。
回答by Amit
回答by Halim Qarroum
The only way a DOM element can receive key events, is if he has the focus.
DOM 元素可以接收关键事件的唯一方法是他是否拥有focus。
Either set the focus to your divin the onreadyhandler :
要么div在onready处理程序中将焦点设置为您的：
$(function() {
$('#mydiv').focus();
});
Or give the focus to your element through the tabindex attribute.
或者通过tabindex 属性将焦点放在您的元素上。
EDIT :As @roasted explained, you can also set a CSS rule to your divto avoid restyling issues :
编辑：正如@roasted 所解释的，您还可以为您设置 CSS 规则div以避免重新设计问题：
#myDiv {
outline: 0 solid;
}
回答by pala?н
What you really need to do here is bind the keypress event to all form elements such as input, select and textarea inside the div like:
您真正需要在这里做的是将 keypress 事件绑定到 div 内的所有表单元素，例如 input、select 和 textarea，例如：
$("#myDiv input, select, textarea").keypress(function (event) {
if (event.which == 13) {
event.preventDefault();
alert('You pressed enter!');
}
});
Main thing to notice here is the use of event.preventDefault(). Since, if you don't use it, pressing the enter key might result in submitting the form, which you obviously don't want here. You just want to press the enter key to filter the content of a Grid. So, as soon as the enter key is pressed you can get the values from the input elements and filter the grid accordingly.
这里要注意的主要事情是使用event.preventDefault(). 因为，如果您不使用它，按回车键可能会导致提交表单，而您显然不希望在此处提交该表单。您只需按 Enter 键即可过滤 Grid 的内容。因此，只要按下回车键，您就可以从输入元素中获取值并相应地过滤网格。
回答by Samuel Kwame Antwi
You can focus the submit button or a tag first then click it
您可以先聚焦提交按钮或标签，然后单击它
$('#id of input button').focus();
or
或者
$('input[type="submit"]').focus();
then press enter
然后按回车
$("#inputid").keypress(function (e) {
if (e.which == 13) {
alert('You pressed enter!');
}
});
回答by Kamil T
Your question could be more precise - you want to detect KeyPressed event on input object nested withing certain div. Maybe you could try:
您的问题可能更精确 - 您想检测嵌套在特定 div 中的输入对象上的 KeyPressed 事件。也许你可以试试：
$("#myDiv input,select").keypress(function (e) {
if (e.which == 13) {
alert('You pressed enter!');
}
});
回答by Bharadwaj
Enter key is pressed mainly to input something or submit. Have a button or text box inside the div which is highlighted and then press enter.
Enter 键主要用于输入内容或提交。在 div 中突出显示一个按钮或文本框，然后按 Enter。
回答by Daniel Ruf
$("#inputid").keypress(function (e) {
if (e.which == 13) {
alert('You pressed enter!');
}
});
you want to abind the event handler to a specific input / button (like some "filter" button)
您想将事件处理程序绑定到特定的输入/按钮（如某些“过滤器”按钮）
回答by Vishal
You can first set the focus on the div using:
您可以首先使用以下方法将焦点设置在 div 上：
window.location.hash = '#name of div';
Then use your code it will work.
然后使用您的代码它将起作用。
