CODEWITHSUNDEEP
javascriptjqueryhtml
Bir
Bir

Reputation: 812

Keep cursor from moving to the next button when tab key pressed

I have a form with 3 pages. When the first page fills up the user goes to the next page by clicking the 'next' button.

Intention: If the user presses the tab key, a message shows, and the cursor remains in the 'next' button.

Problem: when I press the tab key the message shows and the cursor remains on the 'next' button. However, the 2nd time the tab key is pressed, the cursor goes to the next page.

Here is my code:

 <div class="next"><a class="next-button" href="#second">Next</a></div>

 $('.next-button').on("keyup", function(event) {
 if (event.which == 9) {
   alert('Click Next button to go to the next Page');
   return false;
}
});

Upvotes: 0

Views: 2654

Answers (1)

Vash The Stampede
Vash The Stampede

Reputation: 451

I see that in your example, when the second time the tab key is pressed the cursor falls into the first field of your 'second page'. Maybe there's a more efficient way to approach this, but how about this?

 $('.next-button').on("keydown", function(event) {
     if (event.which == 9) {     
        alert('Click Next button to go to the next Page');
        this.focus();             
        return false;

    }
});

Notice that I'm forcing the focus back on the Next button. My JSFiddle, of course, doesn't reflect the real functionality of your page, but this might give you an idea of how it would work:

http://jsfiddle.net/BBWxz/1/

If the second page still shows up even after focusing on the Next button, then you could add this to the code above, so the second page doesn't doesn't show at all.

$('.second-page').hide();

So basically, the code would look like this:

 $('.next-button').on("keydown", function(event) {
     if (event.which == 9) {     
        alert('Click Next button to go to the next Page');
        this.focus();
        $('.second-page').hide();
        return false;

     }
});

Kludgy? yes, but I think this will do what you want.

Upvotes: 1

Related Questions