Detect when user presses tab on first or last form element (in div)

Question

I have an HTML form spread across several divs. I need to know when the user presses the tab key when they are on the first or last element within each div (so I can apply some custom tab functionality). For the first element in the div I'm looking for Tab+Shift; for the last element I'm looking for Tab only. The elements could be textboxes, textareas, radio buttons, select lists, or check boxes.

What is the most efficient way to detect the first and last elements? Happy to use a jQuery solution.

Thanks.

If all you're trying to do is move the focus back/forward to the correct input , why don't you use the `tabindex` attribute instead of JS? — James Allardice, Jul 28 '11 at 18:02

FishBasketGordo · Answer 1 · 2011-07-28T18:29:40.427

2

You can use the :first-child and :last-child selectors to find the form elements. Then, you can attach a keydown event handler and check for SHIFT+TAB and TAB respectively.

$('div input:first-child').keydown(function(event) {
    if (event.which == 9 && event.shiftKey) { // Tab is keycode 9
        // Do custom tab handling
    }
});

$('div input:last-child').keydown(function(event) {
    if (event.which == 9) {
        // Do custom tab handling
    }
});

edited Jul 28 '11 at 18:29

answered Jul 28 '11 at 18:03

FishBasketGordo

22,904
4
58
91

Those will not work. They will find all inputs within all divs and return ONLY the first of the total collection or the last of the total collection. Not the first and last of each div. – JAAulde Jul 28 '11 at 18:11

score 0 · Answer 2 · answered Jul 28 '11 at 17:59

0

You could use the first and last child selectors:

var first = $("#form-name:first-child");
var last = $("#form-name:last-child");

answered Jul 28 '11 at 17:59

robbrit

17,560
4
48
68

score 0 · Accepted Answer · edited Oct 24 '22 at 16:23

As long as the inputs truly the first and last children of the DIVs, the below will work. Otherwise you will need to get a little more tricky with the selection.

Edit: My assertion about child order seems to be incorrect. This should work for most situations. End Edit

If you want it to be specific to certain kinds of input, or anything which is considered input but isn't actually an input element, the selector will need some minor adjustment.

Demo

http://jsfiddle.net/JAAulde/tHkdz/

Code

$('#myform')
  .find('div input:first-child, div input:last-child')
  .bind('keydown', function(e) {
    if (e.which === 9) {
      // custom code here
      e.preventDefault();
    }
  });

So you want to use the same event handler for both the first and last inputs? It seems like you would only want to handle SHIFT+TAB on the first inputs and let the default behavior take over on just a TAB key. — FishBasketGordo, Jul 28 '11 at 18:32

score 0 · Answer 4 · edited May 23 '17 at 12:31

Sounds like you want to have the tab wrap on the first and last element.

Get the first: $('#form').find('input, textarea, select').first();
Get the last: $('#form').find('input, textarea, select').first();
Bind keydown to the elements: .keydown()
- use this to determine which key was pressed: jQuery Event Keypress: Which key was pressed?
- Then focus on the element you want: .focus()

edit: selector logic was wrong

e.g.: http://jsfiddle.net/rkw79/fuXyf/

Detect when user presses tab on first or last form element (in div)

4 Answers4