Simulate pressing tab key with jQuery

Question

I have some textboxes on a .net-page and want to achieve the following with jQuery: if the user presses return, the program should behave "as if" he had used the tab key, thus, selecting the next element. I tried the following code (and some more):

<script type="text/javascript">  jQuery(document).ready(function () {      $('.tb').keypress(function (e) {         if (e.keyCode == 13)         {             $(this).trigger("keydown", [9]);             alert("return pressed");         }      }); }); 

<asp:TextBox ID="TextBox1" runat="server" CssClass="tb"></asp:TextBox> <asp:TextBox ID="TextBox2" runat="server" CssClass="tb"></asp:TextBox> 

but it just does not work! Missing something, making a mistake?

Here some links I used

here

and here

Answer 1

Try this:

http://jsbin.com/ofexat

$('.tg').bind('keypress', function(event) {   if(event.which === 13) {     $(this).next().focus();   } }); 

or the loop version: http://jsbin.com/ofexat/2

Answer 2

I created a simple jQuery plugin which does solve this problem. It uses the ':tabbable' selector of jQuery UI to find the next 'tabbable' element and selects it.

Example usage:

// Simulate tab key when enter is pressed            $('.tb').bind('keypress', function(event){     if(event.which === 13){         if(event.shiftKey){             $.tabPrev();         }         else{             $.tabNext();         }         return false;     } });