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

回答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

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

回答3:

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

回答4:

Try this

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