Change Enter from submission to Tab?

Users don’t like the fact that the Enter key submits the page. So I am tasked with preventing the submission and changing the Enter key to a Tab to the next field.

I have tried many javascript snippets found on the net but none have worked so far. The only one that has even come close to having an effect was e.preventDefault() of the jQuery API, which stops the submit, but nothing I have tried emulates the tab behavior.

e.returnValue = false;
e.cancel = true;

Page still submits with the above in the keydown event handler. Same effect with return false in the keydown event handler. The handler is firing, tested by putting a breakpoint in it with firebug.

This needs to work with both IE and Firefox.

Don’t say “don’t do this”.
1) I’m already convinced that I shouldn’t do it, but it’s not a choice that is mine, so the discussion is mute.
2) It would be an answer to the question “Should I do this?”, which is not the question that I am asking.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

This just feels icky, but you could use event.preventDefault as you mentioned and then call focus() on the next closest input:

Here’s a simple example:

$("input").bind("keydown", function(event) {
    if (event.which === 13) {
        event.stopPropagation();
        event.preventDefault();
        $(this).next("input").focus();
    }
});

Example: http://jsfiddle.net/andrewwhitaker/Txg65/

Update: If you have elements in between your inputs, using plain next() will not work. Instead, use nextAll():

$("input").bind("keydown", function(event) {
    if (event.which === 13) {
        event.stopPropagation();
        event.preventDefault();
        $(this).nextAll("input").eq(0).focus();
    }
});

http://jsfiddle.net/andrewwhitaker/GRtQY/

Method 2

$("input").bind("keydown", function(event) {

    if (event.which === 13 && this.type !== 'submit') {
        event.preventDefault();
        $(this).next("input").focus();
    }
});

Method 3

Based on this post:
http://forum.jquery.com/topic/how-to-find-next-node-in-focus-order

I came up with this. I eventually chose not to use focasables though, and instead use input to get the effect I wanted. The .not is to prevent image buttons and submit buttons from being effected, so that they still have the default action of submit on enter whenever they have focus.

$(document).ready(function() {
var focusables = $(":input").not('[type="image"]').not('[type="submit"]');

  focusables.keydown(function(e) {
    if (e.keyCode == 13) {
      e.preventDefault();
      var current = focusables.index(this),
              next = focusables.eq(current + 1).length ? focusables.eq(current + 1) : focusables.eq(0);
      next.focus();
    }
  });
});

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0