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.

Inclinometer

Answer 1

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;
    }
});

Zymogenic

I know, but I was hoping there was another way to prevent the default behavior of the keyup function. But thanks! – Inclinometer

@krysis Sorry, doesn't look like there is much you can do with keyup – Zymogenic

Thank you, anyways! :) Maybe I'll get keydown to work for what I'm trying to do. – Inclinometer

$('form').keypress(function(e){ if(e.which === 13){ e.preventDefault(); } }); – Yardage

+1 I was trying to preventDefault() on KEYUP to prevent scrolling while certain elements had focus. KEYDOWN worked for me. Thanks! – Sundae

Answer 2

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?

Marlysmarmaduke

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. – Inclinometer

@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. – Zymogenic

also, preventDefault is a function, so should be e.preventDefault() – Eldest

Answer 3

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();

Hummocky

Answer 4

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;
  }
});

Mahon

the keyup event can't be prevented, take a look here – Smith

Answer 5

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.
});

Latoya

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. – Lebeau