52

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/

2
  • 1
    for mobile support and brevity use event.key instead of event.which/keyCode (they are deprecated)
    – oriadam
    Commented Feb 2, 2020 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
    Commented Feb 4, 2020 at 1:51

4 Answers 4

100

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>
9
  • 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
    Commented Aug 11, 2010 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: developer.mozilla.org/en/DOM/event.charCode#Notes
    – balupton
    Commented Aug 12, 2010 at 5:59
  • 1
    @balupton - I should add that event.which is normalized in jQuery, in the jQuery.event.fix function
    – Russ Cam
    Commented Aug 12, 2010 at 22:30
  • 1
    @oriadam feel free to edit the answer to provide the now better option.
    – Russ Cam
    Commented Feb 2, 2020 at 21:51
  • 1
    @Zaz the use of ev.key instead of ev.keyCode is related to the browser API, not jQuery.
    – oriadam
    Commented May 20, 2023 at 13:10
5

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

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

0

Not the answer you're looking for? Browse other questions tagged or ask your own question.