CODEWITHSUNDEEP
jquerykeydownsimulate
AGuyCalledGerald
AGuyCalledGerald

Reputation: 8150

Simulate pressing tab key with jQuery

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

Upvotes: 31

Views: 90529

Answers (4)

Shehbaz
Shehbaz

Reputation: 101

From multiple answers I have combined the perfect solution for me where enter acts as tab on inputs and select and takes focus on next input, select or textarea while allows enter inside text area.

 $("input,select").bind("keydown", function (e) {
     var keyCode = e.keyCode || e.which;
     if(keyCode === 13) {
         e.preventDefault();
         $('input, select, textarea')
         [$('input,select,textarea').index(this)+1].focus();
     }
 });

Upvotes: 13

Mark Lagendijk
Mark Lagendijk

Reputation: 6883

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

Upvotes: 12

czerasz
czerasz

Reputation: 14250

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

Upvotes: 19

Shai Mishali
Shai Mishali

Reputation: 9382

Try this

$(this).trigger({
    type: 'keypress',
    which: 9
});

Upvotes: 5

Related Questions