How can I fire the Tab keypress when the Enter key is pressed?

Question

This is what I have and it works fine. But I want to return the tab key instead of just nothing happening.

$(document).on("keypress", ":input:not(textarea):not([type=submit])", function(event) {
    if (event.keyCode == 13) {
        event.preventDefault();
    }
});

What I want is:

if (event.keyCode == 13) {
    event.preventDefault();
    return event.keyCode = 9; <<= or something similar and simple
}

This seems like a duplicate but I don't see anything to substitute enter for tab code... Tab key already knows to skip hidden and use tab orders.

I think by "return the tab key" you mean that you want to fire a second event as if the tab key had been pressed. (You just assume that "returning" is the way to accomplish that.) — JDB, Aug 24 '16 at 18:20
yes to both... It just seemed to me it would be tighter code to substitute if key == 13 and return code 9 instead. I have to prevent default enter so why not tab instead? — Daniel Yantis, Aug 24 '16 at 18:22
I would recommend against this approach as you're breaking user expectations regarding reasonable browser usability regarding form input and usage of basic web controls. And it will also be non-intuitive for vision impaired users, if that's something that concerns you. — ManoDestra, Aug 24 '16 at 18:23
I second Mano's comment. It's really annoying when developers try to be clever and break common UX expectations. — JDB, Aug 24 '16 at 18:26
@ManoDestra : agreed in general, but this time it's needed to stop the return key from submitting the form. But instead of no action on return why not tab. I have another reason to stop return key submit but not for this discussion. — Daniel Yantis, Aug 24 '16 at 18:27
@DanielYantis: Totally see how you got there, but in general, the bar for unusual behavior probably needs to be higher than "why not"? :-) — T.J. Crowder, Aug 24 '16 at 18:30
I love you guys! But what I want is to specifically make the enter key act like a tab key... Is it possible to substitute key code 13 for 9? and since that is what I want to accomplish - rather than coding it all out the suggested way of set focus to next field (which is not all a tab key does) "why not" substitute the key 13 for 9? — Daniel Yantis, Aug 24 '16 at 18:34
Take a look at this and see if it helps you: http://stackoverflow.com/questions/596481/simulate-javascript-key-events. I've tried a quick test of it and I can't quite get it working yet. Personally, I think it's an absolutely filthy hack, but knock yourself out :D — ManoDestra, Aug 24 '16 at 19:15
You are correct - that's awful! ok I give up and will just use the accepted way of next().focus() — Daniel Yantis, Aug 24 '16 at 20:13

T.J. Crowder · Accepted Answer · 2019-12-06T14:58:25.103

I suspect what you really want is to move to the next field in the form.

If so, you can easily find the next form field and use .focus() to focus it. For instance:

var fields = $(this).closest("form").find("input, textarea");
var index = fields.index(this) + 1;
fields.eq(
  fields.length <= index
  ? 0
  : index
).focus();

Example:

$(document).on("keypress", ":input:not(textarea):not([type=submit])", function(event) {
  if (event.keyCode == 13) {
    event.preventDefault();
    var fields = $(this).closest("form").find("input, textarea");
    var index = fields.index(this) + 1;
    fields.eq(
      fields.length <= index
      ? 0
      : index
    ).focus();
  }
});

<form>
  <div>
    <label>
      Field 1:
      <input type="text">
    </label>
  </div>
  <div>
    <label>
      Field 2:
      <input type="text">
    </label>
  </div>
  <div>
    <label>
      Field 3:
      <input type="text">
    </label>
  </div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

If you're using tabindex to put fields in a different order than document order, you'll have to do a bit more work, basically sorting the result of find on tabindex and working from there. But that should get you going the right way.

This is where the duplicate question would be valid. Yes this will work and even do what I want. But the question remains: can I substitute the return key code for the tab key code? — Daniel Yantis, Aug 24 '16 at 18:31
@DanielYantis: Sorry, completely failed to answer *that* question, didn't I? :-) I don't *think* you can. You could try to create a synthetic `KeyboardEvent`, but I doubt the results would be good, cross-browser, especially as the area around synthetic built-in events has been a real moving target... But maybe the latest makes it possible, I may be slightly out of date as I never find I need to synthesize built-in events. — T.J. Crowder, Aug 24 '16 at 18:41

score 1 · Answer 2 · edited Dec 06 '19 at 15:03

I got the accepted answer to work for me, but I needed to figure out where to stick the code exactly:

$(document).on("keypress", ":input:not(textarea):not([type=submit])", function(event) {
    if (event.keyCode == 13) {
        var fields = $(this).closest("form").find("input, textarea");
        var index = fields.index(this) + 1;

        fields.eq(
            fields.length <= index
                ? 0
                : index
        ).focus();
        event.preventDefault();
    }
});

How can I fire the Tab keypress when the Enter key is pressed?

2 Answers2