How to detect if Enter Key was pressed within a DIV using jquery?

Question

I have successfully hooked the EnterKey event at the document level as following:

    $(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".

<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.

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.

How are you sending a keypress to a div ? I mean, how are you testing this ? — Halim Qarroum
– Halim Qarroum, Commented May 29, 2013 at 11:00
the keypress can be only detected globally on $(window) and form inputs. — user753676
– user753676, Commented May 29, 2013 at 11:02

Amit · Accepted Answer · 2013-05-29 11:07:12Z

35

Try this

 <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

answered May 29, 2013 at 11:07

Amit

15.4k8 gold badges49 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Halim Qarroum · Accepted Answer · 2013-05-29 11:11:30Z

3

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

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

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

Or give the focus to your element through the tabindex attribute.

EDIT : As @roasted explained, you can also set a CSS rule to your div to avoid restyling issues :

#myDiv {
  outline: 0 solid;
}

edited May 29, 2013 at 11:11

answered May 29, 2013 at 11:05

Halim Qarroum

14.1k4 gold badges48 silver badges75 bronze badges

3 Comments

user753676 Over a year ago

but it will lose the focus very easily ;-)

A. Wolff Over a year ago

could use in addition css: #myDiv{outline:0} to avoid active element restyling

Halim Qarroum Over a year ago

Sure, but he will at least be able to receive events. This is why key events are usually handled by inputs elements.

palaѕн · Accepted Answer · 2013-05-29 11:16:58Z

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:

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

answered May 29, 2013 at 11:16

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Comments

Samuel Kwame Antwi · Accepted Answer · 2015-01-22 19:30:38Z

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

answered Jan 22, 2015 at 19:30

Samuel Kwame Antwi

5955 silver badges10 bronze badges

Comments

Kamil T · Accepted Answer · 2013-05-29 11:01:25Z

0

Your question could be more precise - you want to detect KeyPressed event on input object nested withing certain div. Maybe you could try:

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

answered May 29, 2013 at 11:01

Kamil T

2,2161 gold badge19 silver badges28 bronze badges

1 Comment

Kamil T Over a year ago

Look at the the original question: "Actually, the Div contains some input/select controls which are used to filter the content of a Grid"

Bharadwaj · Accepted Answer · 2013-05-29 11:06:09Z

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.

answered May 29, 2013 at 11:06

Bharadwaj

2,5511 gold badge25 silver badges35 bronze badges

Comments

score 0 · Accepted Answer · 2013-05-29 13:38:09Z

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)

edited May 29, 2013 at 13:38

answered May 29, 2013 at 11:06

user753676

1 Comment

Kamil T Over a year ago

You shoul rather use $("#inputid") rather than $("#myDiv #inputid") in this case. Id is unique for each element on page, there's no need to specify it's parent in the selector.

eldarerathis · Accepted Answer · 2014-01-30 05:59:45Z

0

You can first set the focus on the div using:

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

Then use your code it will work.

edited Jan 30, 2014 at 5:59

eldarerathis

36.4k10 gold badges93 silver badges94 bronze badges

answered Jan 30, 2014 at 5:34

Vishal

82612 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to detect if Enter Key was pressed within a DIV using jquery?

8 Answers 8

Comments

3 Comments

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

3 Comments

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related