如何使用jquery检测在DIV中是否按下了回车键？

Question

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

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

但是，我无法在一个ID为"myDiv"的Div上挂钩EnterKey事件。

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

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

如何检测Div中的Enter键按下事件？实际上，该Div包含一些用于筛选网格内容的输入/选择控件。我想挂载Enter键事件，以便在按下Enter键时可以筛选网格。

编辑：请注意，我在Div中有输入框（我故意没有显示它们）。我不想为Div中的每个输入控件手动挂钩事件。同时，我假设当用户按下Enter键时，至少一个输入控件将获得焦点。

- Baig

---

你是如何向 div 发送按键事件的？我的意思是，你是如何进行测试的？ - Halim Qarroum

按键事件只能在 $(window) 和表单输入框中全局检测到。 - user753676

Answer 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!');
    }
 });
});

演示

- Amit

Answer 2

DOM元素只有在获得了焦点后才能接收键盘事件。

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

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

或者通过tabindex属性将焦点放在您的元素上。

编辑：如@roasted所解释的那样，您还可以为您的

设置CSS规则以避免重新设计问题：

#myDiv {
  outline: 0 solid;
}

- Halim Qarroum

---

但它很容易失去焦点;-) - user753676

可以使用以下CSS代码：#myDiv{outline:0}，以避免激活元素重新样式化。 - A. Wolff

当然可以，但他至少能够接收事件。这就是为什么关键事件通常由输入元素处理的原因。 - Halim Qarroum

Answer 3

您需要做的是将keypress事件绑定到包含在div内的所有表单元素，例如input、select和textarea，示例代码如下：

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

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

- palaѕн

Answer 4

你可以先把提交按钮或链接聚焦，然后再单击它。

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

或

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

然后按回车键。

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

- Samuel Kwame Antwi

Answer 5

你的问题可能需要更加精确 - 你想要检测某个 div 中嵌套的输入对象的 KeyPressed 事件。也许你可以尝试：

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

- Kamil T

---

看一下原始问题：“实际上，Div（容器）包含一些用于筛选网格内容的输入/选择控件。” - Kamil T

Answer 6

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

你想将事件处理程序绑定到特定的输入/按钮（比如一些“筛选”按钮）

- user753676

---

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

Answer 7

按下回车键主要用于输入或提交内容。 在 div 中放置一个按钮或文本框，然后将其突出显示并按下回车键即可。

- Bharadwaj

Answer 8

你可以先使用以下代码将焦点设置在 div 上：

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

然后使用你的代码它就会工作。

- Vishal