JQuery: Keyup, how do I prevent the default behavior of the arrow (up & down) and enter key?

Question

JavaScript (JQuery)

$('input').keyup(function(e)
{
    var code = e.keyCode ? e.keyCode : e.which;

    switch(code)
    {
        case 38:
        break;

        case 40:
        break;

        case 13:
        break;

        default:
        return;
     }
 });

HTML

<form method="post" action="/">
<input type="text" name="text" />
<button type="submit">Submit</button>
</form>

I have 2 problems:

1) The caret shouldn't move when I hit the up arrow key.

For example, in Chrome when I hit the up-key it moves the caret to the left. But I only have this problem in Chrome. It works fine in FF.

2) When I hit the enter key, I don't want the form to be submitted.

BTW, I want to get this to work with keyup and not keypress.

I'd appreciate any ideas. Thanks.

score 52 · Accepted Answer · edited May 23 '17 at 10:29

52

I don't think you can preventDefault() (which is what you'd need to use to stop the browser from performing the default action for a key) on the keyup event - it is fired after the default event has already occurred. See this page for more.

If you can, consider using the keydown instead.

As for stopping the form from submitting, you could bind to the submit event and return false; when the submit was not triggered by the submit button (see jQuery: how to get which button was clicked upon form submission? for how to determine this).

On the other hand, you could also bind to keypress for the form and when Enter is pressed, cancel submission the same way (untested code):

$('form').keypress(function(e){
    if(e.which === 13){
        return false;
    }
});

edited May 23 '17 at 10:29

Community

1
1

answered Jun 02 '11 at 21:02

no.good.at.coding

20,221
2
60
51

I know, but I was hoping there was another way to prevent the default behavior of the keyup function. But thanks! – Jun 02 '11 at 21:25
@krysis Sorry, doesn't look like there is much you can do with `keyup` – no.good.at.coding Jun 02 '11 at 21:30
Thank you, anyways! :) Maybe I'll get `keydown` to work for what I'm trying to do. – Jun 02 '11 at 21:32
2

`$('form').keypress(function(e){ if(e.which === 13){ e.preventDefault(); } });` – Ax. Jul 19 '12 at 07:58
1

+1 I was trying to `preventDefault()` on KEYUP to prevent scrolling while certain elements had focus. KEYDOWN worked for me. Thanks! – Ryan Wheale Mar 05 '13 at 23:12

score 0 · Answer 2 · answered Aug 28 '12 at 14:21

0

It seems like that you actually CAN stop the default for 'ENTER' while using keyup(); ... jQuery api writes about it themselves here: http://api.jquery.com/keyup/

Here's how you have to do:

$('textarea').keyup(function(e) {
   // your code here
}).keydown(function(e){
   // your e.which for ENTER.
});

answered Aug 28 '12 at 14:21

skolind

1,724
6
28
51

That's not using `keyup` though - and that's the whole point. You're right - that code will work, but only because you're using `keydown` for suppressing the enter key. As other answers have stated here, you can't do this using `keyup` alone, as the event will already have been fired by then and you can't go back in time and suppress it. – Mark Embling Jun 14 '17 at 09:39

score 0 · Answer 3 · answered Jun 02 '11 at 21:03

0

Instead of break you could try return false or make it call a function and use http://api.jquery.com/event.preventDefault/

For example: case 40: function(e) {e.preventDefault;}

Also, $('form').submit(function() {return false}); would stop submissions altogether, but I'm not sure that's what you're after?

answered Jun 02 '11 at 21:03

thugsb

22,856
6
30
44

I've already tried e.preventDefault, but it doesn't work for some reason. And I have no idea why. It only works when I use keydown / keypress. – Jun 02 '11 at 21:12
2

@krysis None of the answers in their current form (making use of `keyup`) will work because `keyup` if fired *after* the default action is already done so you cannot `preventDefault()`. See my corrected answer. – no.good.at.coding Jun 02 '11 at 21:19
1

also, `preventDefault` is a function, so should be `e.preventDefault()` – Adam Hopkinson Jun 02 '11 at 21:20

score 0 · Answer 4 · answered Jun 02 '11 at 21:03

0

In order to prevent the form being submitted when the user presses enter you need to bind the submit function of your form and return false if the event trigger was the enter button being pressed.

for the Up/Down button press, use e.preventDefault();

answered Jun 02 '11 at 21:03

Matthew Nessworthy

1,428
10
19

score 0 · Answer 5 · answered Jun 02 '11 at 21:17

The most reliable method is a combination of e.preventDefault(), e.stopPropagation() and return false;

Here's what it might look like:

var override_keys = [13, 38, 40];

$('input').keyup(function(e){
  var code = e.keyCode ? e.keyCode : e.which;

  if ($.inArray(code, override_keys)) {
    e.preventDefault();
    e.stopPropagation();
    return false;
  }
});

Also, to prevent the form from being submitted with the enter key you should check the form's submit event:

$('#form').submit(function(e){
  var code = e.keyCode ? e.keyCode : e.which;

  if ($.inArray(code, override_keys)) {
    return false;
  }
});

the keyup event can't be prevented, take a look [here](http://www.quirksmode.org/dom/events/keys.html) — joiggama, Sep 13 '13 at 23:52

JQuery: Keyup, how do I prevent the default behavior of the arrow (up & down) and enter key?

5 Answers5