Question

116

Enter key press behaves like a Tab in Javascript

rated 0 times [ 117] [ 1] / answers: 1 / hits: 186104 / 15 Years ago, wed, june 17, 2009, 12:00:00

I'm looking to create a form where pressing the enter key causes focus to go to the next form element on the page. The solution I keep finding on the web is...

 <body onkeydown=if(event.keyCode==13){event.keyCode=9; return event.keyCode}>

Unfortunately, that only seems to work in IE. So the real meat of this question is if anybody knows of a solution that works for FF and Chrome? Additionally, I'd rather not have to add onkeydown events to the form elements themselves, but if that's the only way, it will have to do.

This issue is similar to question 905222, but deserving of it's own question in my opinion.

Edit: also, I've seen people bring up the issue that this isn't good style, as it diverges from form behavior that users are used to. I agree! It's a client request :(

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

brooksb

Add To Favorites

Follow

Total Points: 480

Total Questions: 98

Total Answers: 106

Location: Somalia

Member since Mon, Feb 27, 2023

1 Year ago

brooksb questions

1 How can I add a role to a user on DiscordJS v13?

Tue, Nov 9, 21, 00:00, 3 Years ago

1 How to set a timeout using axios without cancelling API call?

Thu, Oct 8, 20, 00:00, 4 Years ago

1 react access dom elements by classname in component

Mon, May 4, 20, 00:00, 4 Years ago

1 React - TypeError: Cannot read property 'setState' of undefined

Mon, Mar 30, 20, 00:00, 4 Years ago

1 Multiple Slick Sliders On Same Page with same classes?

Wed, Mar 11, 20, 00:00, 4 Years ago

View All

answered 15 Years ago julissaimana · Accepted Answer

I used the logic suggested by Andrew which is very effective. And this is my version:

$('body').on('keydown', 'input, select', function(e) {

    if (e.key === Enter) {

        var self = $(this), form = self.parents('form:eq(0)'), focusable, next;

        focusable = form.find('input,a,select,button,textarea').filter(':visible');

        next = focusable.eq(focusable.index(this)+1);

        if (next.length) {

            next.focus();

        } else {

            form.submit();

        }

        return false;

    }

});

KeyboardEvent's keycode (i.e: e.keycode) depreciation notice :- https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode