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

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

开发者_如何学Go

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.

---

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

---

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?

---

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

---

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

---

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