jQuery - keydown / keypress /keyup ENTERKEY detection?

Question

Trying to get jQuery to detect enter input, but space and other keys are detected, enter isn't detected. What's wrong below:

$("#entersomething").keyup(function(e) {
    alert("up");
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code==13) {
        e.preventDefault();
    }

    if (code == 32 || code == 13 || code == 188 || code == 186) {
        $("#displaysomething").html($(this).val());
});

<input id="entersomething" />
<div id="displaysomething"&gt;&lt;/div&gt;

http://jsfiddle.net/zeRrv/

for mobile support and brevity use `event.key` instead of `event.which/keyCode` (they are deprecated) — oriadam, Feb 02 '20 at 12:41
yes, it's been almost 10 years since i asked this question. glad to know jquery is still around and evolving! — ina, Feb 04 '20 at 01:51

score 97 · Accepted Answer · edited Feb 06 '20 at 15:42

97

JavaScript/jQuery

$("#entersomething").keyup(function(e){ 
    var code = e.key; // recommended to use e.key, it's normalized across devices and languages
    if(code==="Enter") e.preventDefault();
    if(code===" " || code==="Enter" || code===","|| code===";"){
        $("#displaysomething").html($(this).val());
    } // missing closing if brace
});

HTML

<input id="entersomething" type="text" /> <!-- put a type attribute in -->
<div id="displaysomething"></div>

edited Feb 06 '20 at 15:42

oriadam

7,747
2
50
48

answered Aug 11 '10 at 21:37

Russ Cam

124,184
33
204
266

doh!! btw is there an IDE you'd recommend that can check for braces? tried using aptana, but having difficulty adapt to it and it doesn't have a shortcut for in-ide preview! – ina Aug 11 '10 at 21:41
If you are on OSX then Textmate wins hands down for me. Zend Studio and Aptana were nice and I'm sure that you can manually add shortcuts/hotkeys to do what you'd like??? Interesting about `event.which`, never knew that before: https://developer.mozilla.org/en/DOM/event.charCode#Notes – balupton Aug 12 '10 at 05:59
1

@balupton - I should add that `event.which` is normalized in jQuery, in the `jQuery.event.fix` function – Russ Cam Aug 12 '10 at 22:30
Do note that `which` is now being deprecated. https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which – Juxhin Mar 28 '16 at 10:11
@Juxhin is right on the deprecation notice. Historically, IE started it with `event.keyCode` then the --moz and --webkit family pushed `event.which`. Both of which are now **DEPRECATED** along with `event.charCode`. The only option that's left is `event.key` but --moz family does not currently support it. – Abel Callejo Jan 09 '19 at 13:47
we now have a lot of mobile/touch keyboards and we can no longer trust arbitrary key codes such as 13/186. in other words - stop using `event.which/keyCode` and start using `event.key` – oriadam Feb 02 '20 at 12:40
1

@oriadam feel free to edit the answer to provide the now better option. – Russ Cam Feb 02 '20 at 21:51
@oriadam: Where is this documented? I don't see it in [the API](https://api.jquery.com/category/events/). – Zaz May 20 '23 at 06:33
1

@Zaz the use of `ev.key` instead of `ev.keyCode` is related to [the browser API](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key), not jQuery. – oriadam May 20 '23 at 13:10

score 5 · Answer 2 · answered Sep 01 '19 at 09:03

update: nowadays we have mobile and custom keyboards and we cannot continue trusting these arbitrary key codes such as 13 and 186. in other words, stop using event.which/event.keyCode and start using event.key:

if (event.key === "Enter" || event.key === "ArrowUp" || event.key === "ArrowDown")

score 3 · Answer 3 · answered Dec 30 '12 at 19:01

3

I think you'll struggle with keyup event - as it first triggers keypress - and you won't be able to stop the propagation of the second one if you want to exclude the Enter Key.

answered Dec 30 '12 at 19:01

Spencer Mark

5,263
9
29
58

score 1 · Answer 4 · answered Aug 11 '10 at 21:43

1

jQuery Sparkle includes a custom event for this. The source can be seen here: http://github.com/balupton/jquery-sparkle/blob/master/scripts/resources/jquery.events.js

Here is a demo http://www.balupton.com/sandbox/jquery-sparkle/demo/#event-enter

answered Aug 11 '10 at 21:43

balupton

47,113
32
131
182

jQuery - keydown / keypress /keyup ENTERKEY detection?

4 Answers4

Linked

Related