CODEWITHSUNDEEP
javascripthtml
KRISHNA
KRISHNA

Reputation: 21

How to enable the keyboard event for a html div?

In my code there is a div like : 

<div style="text-decoration:underline" onmouseover="this.style.cursor='pointer';" id="<%=namespace%>_pmProfileName_<%=i%>_"  onclick="perfChartConfig_<%=namespace%>.doShowProfilesForElement(this);"></div>

Now clicking this link will open a new popup window. But this thing can be done only by a mouse click. I want to do it by pressing enter button also.

Any idea how to do this ?

Upvotes: 2

Views: 3149

Answers (4)

Tim Down
Tim Down

Reputation: 324587

You need to make the <div> able to receive focus, which it cannot do by default. Your options are making it editable, as mentioned in another answer, or less drastically by giving your <div> a tabindex attribute.

<div tabindex="0">...</div>

Upvotes: 3

TROODON
TROODON

Reputation: 1175

Maybe you need that plugin?

Upvotes: 0

jfriend00
jfriend00

Reputation: 707426

First, you have to decide how you want to respond to the Enter key. Keystrokes go to the event on the web page that has the keyboard focus. If no item appears to have focus, keys may bubble up to the document object for it to decide what to do.

So, when you say you want to do something on the Enter key, is that any Enter key that's pressed no matter where the focus is in the web page? Or is that only when the focus is on that particular div?

To allow that div to ever have the keyboard focus and thus get keyboard events, you would have to make the div editable so that it can accept keyboard focus and keyboard events.

One way to do this is to give it the attribute contenteditable="true" as in:

<div contenteditable="true">Inital Text</div>

Then, once it's capable of accepting keyboard focus and keyboard events, you can install an event handler to handle the Enter key.

If you really want to respond to the enter key anywhere on the page, then you can install a keyboard event handler at the document level and it will grab and keys that bubble up to the document level.

Upvotes: 0

Matt Stein
Matt Stein

Reputation: 3053

Use a JavaScript framework like jQuery, and use its neatly-documented keyboard events.

Upvotes: 1

Related Questions