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.

Answer 1

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