50

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
    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
    Feb 4, 2020 at 1:51

4 Answers 4

95

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
    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
    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
    Aug 12, 2010 at 22:30
  • 1
    @oriadam feel free to edit the answer to provide the now better option.
    – Russ Cam
    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
    May 20 at 13:10
4

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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