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

时间:2021-12-05 00:06:05

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包含一些输入/选择控件,用于过滤网格的内容。我想挂钩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时,至少有一个输入控件应该有焦点。

8 个解决方案

#1


34  

Try this

尝试这个

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

Jquery

jQuery的

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

Demo

演示

#2


4  

The only way a DOM element can receive key events, is if he has the focus.

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

Either set the focus to your div in the onready handler :

在onready处理程序中将焦点设置为div:

$(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 div to avoid restyling issues :

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

#myDiv {
  outline: 0 solid;
}

#3


3  

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键过滤网格的内容。因此,只要按下回车键,您就可以从输入元素中获取值并相应地过滤网格。

#4


1  

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

#5


1  

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

#6


0  

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键。

#7


0  

$("#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)

你想要将事件处理程序绑定到特定的输入/按钮(如某些“过滤器”按钮)

#8


0  

You can first set the focus on the div using:

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

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

Then use your code it will work.

然后使用它将起作用的代码。

#1


34  

Try this

尝试这个

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

Jquery

jQuery的

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

Demo

演示

#2


4  

The only way a DOM element can receive key events, is if he has the focus.

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

Either set the focus to your div in the onready handler :

在onready处理程序中将焦点设置为div:

$(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 div to avoid restyling issues :

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

#myDiv {
  outline: 0 solid;
}

#3


3  

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键过滤网格的内容。因此,只要按下回车键,您就可以从输入元素中获取值并相应地过滤网格。

#4


1  

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

#5


1  

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

#6


0  

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键。

#7


0  

$("#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)

你想要将事件处理程序绑定到特定的输入/按钮(如某些“过滤器”按钮)

#8


0  

You can first set the focus on the div using:

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

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

Then use your code it will work.

然后使用它将起作用的代码。