如何使用jquery检测是否在DIV中按下了Enter键？答案

【问题标题】：How to detect if Enter Key was pressed within a DIV using jquery?如何使用jquery检测是否在DIV中按下了Enter键？
【发布时间】：2013-05-24 14:31:59
【问题描述】：

我已成功在文档级别挂钩 EnterKey 事件，如下所示：

    $(document).keypress(function (e) {
        if (e.which == 13) {
            alert('You pressed enter!');
        }
    });

但是，我无法将 EnterKey 事件挂接到 ID 为“myDiv”的 Div。

<div id="myDiv"></div>

$("#myDiv").keypress(function (e) {
     if (e.which == 13) {
         alert('You pressed enter!');
     } 
 });

是否可以在 Div 中检测到 EnterKey 按下？实际上，Div 包含一些用于过滤 Grid 内容的输入/选择控件。我想挂钩 EnterKey 事件，以便在按下 EnterKey 时可以过滤 Grid。

编辑： 请注意，我在 div 中有输入（我故意没有在这里显示）。我不想为 Div 中的每个输入控件手动挂钩事件。另外，我假设当用户按下 EnterKey 时，至少一个输入控件应该有焦点。

【问题讨论】：

如何将按键发送到 div ？我的意思是，你是如何测试这个的？
按键只能在 $(window) 和表单输入上全局检测到。

标签： jquery keypress

【解决方案1】：

试试这个

 <div id="Div1">
    <input type ="text" id="aa"/>
    sdfsd hsjdhsj shdj shd sj
 </div>

jQuery

$(function(){
 $("#Div1 input").keypress(function (e) {
    if (e.keyCode == 13) {
        alert('You pressed enter!');
    }
 });
});

Demo

【讨论】：

【解决方案2】：

DOM 元素接收关键事件的唯一方法是，如果他有焦点。

在onready 处理程序中将焦点设置到您的div：

$(function() {
   $('#mydiv').focus();
});

或通过tabindex attribute 将焦点放在您的元素上。

编辑：正如@roasted 解释的那样，您还可以为您的div 设置CSS 规则以避免重新设置样式问题：

#myDiv {
  outline: 0 solid;
}

【讨论】：

但它很容易失去焦点;-)
还可以使用 css: #myDiv{outline:0} 来避免活动元素重新设置样式
当然可以，但他至少可以接收事件。这就是为什么键事件通常由输入元素处理的原因。

【解决方案3】：

这里你真正需要做的是将按键事件绑定到所有表单元素，例如 div 内的输入、选择和文本区域，例如：

$("#myDiv input, select, textarea").keypress(function (event) {
    if (event.which == 13) {
        event.preventDefault();
        alert('You pressed enter!');
    }
});

这里要注意的主要是event.preventDefault() 的使用。因为，如果您不使用它，按 Enter 键可能会导致提交表单，这显然是您不想要的。您只需按 Enter 键即可过滤 Grid 的内容。因此，一旦按下回车键，您就可以从输入元素中获取值并相应地过滤网格。

【讨论】：

【解决方案4】：

您的问题可能更准确 - 您想检测嵌套在某些 div 中的输入对象上的 KeyPressed 事件。也许你可以试试：

$("#myDiv input,select").keypress(function (e) {
        if (e.which == 13) {
            alert('You pressed enter!');
        }
    });

【讨论】：

看原来的问题：“实际上，Div 包含一些用于过滤 Grid 内容的输入/选择控件”

【解决方案5】：

您可以先聚焦提交按钮或标签，然后点击它

  $('#id of input button').focus();

或

 $('input[type="submit"]').focus();

然后按回车

 $("#inputid").keypress(function (e) {
   if (e.which == 13) {
    alert('You pressed enter!');
  }
});

【讨论】：

【解决方案6】：

Enter键主要用于输入内容或提交。在突出显示的 div 内有一个按钮或文本框，然后按 Enter。

【讨论】：

【解决方案7】：

$("#inputid").keypress(function (e) {
    if (e.which == 13) {
        alert('You pressed enter!');
    }
});

您想将事件处理程序绑定到特定的输入/按钮（如某些“过滤”按钮）

【讨论】：

在这种情况下，您应该使用 $("#inputid") 而不是 $("#myDiv #inputid")。页面上每个元素的 ID 都是唯一的，无需在选择器中指定其父级。

【解决方案8】：

您可以首先使用以下方法将焦点设置在 div 上：

window.location.hash = '#name of div';

然后使用你的代码就可以了。

【讨论】：