CODEWITHSUNDEEP
javascripthtmlforms
Luca Reghellin
Luca Reghellin

Reputation: 8125

How to prevent tab key from jumping to the next form field?

I've got a problem: I'm building an in-page multistage form. Every 'stage' is on its own panel (a div). I'll move through panels via javascript (next/prev buttons). Every panel has its own validation, and it's not possibile to jump to the next panel if the current is not succefully validated. All fine.

The problem is when the user starts using tabs to jump from a field to another. When he reaches the last field of the current panel, the tab will bring him to the next panel.

So what I would need is to avoid the last field of each form to accept tab events, or, the first field of each form to be reachable from a tab. Or the like.

In other words: how disable tab key only for certain fields? Or, how to limit tab action only to a certain group of fields in a form?

I've tried a couple of ways, no luck:

// on last panel field
$('.block-tab').on('keypress', function(e) { 
  if (e.keyCode == 9) e.preventDefault();
});

// on first panel field
$('.block-tab').on('keyup', function(e) { 
  if (e.keyCode == 9) e.preventDefault(); 
});

Upvotes: 5

Views: 14402

Answers (1)

Luca Reghellin
Luca Reghellin

Reputation: 8125

As suggested by @Teemu, onkeydown will work. So basically, on the last field of each panel/tab I'll assign a class such as 'block-tab'. 

<input class="block-tab" name="email" id="email" type="text"  value="" />

Then:

$('.block-tab').on('keydown', function(e) { 
  if (e.keyCode == 9) e.preventDefault(); 
});

This will prevend the user to access the next panel without clicking the 'next' button and thus validating the current panel first.

Upvotes: 8

Related Questions