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

Well, no; because you're not passing the event to the function. You need to use: `$('.tb').keypress(function(e){` then the function has access to the event, and thence `event.keyCode`, although I think `e.which` is the normalized jQuery version (which may, or may not, be necessary). — David Thomas, Feb 09 '12 at 15:55
Can you clarify "doesn't work"? What happens? Get any JS-errors? — Christofer Eliasson, Feb 09 '12 at 15:56
Possible duplicate of [Simulating the TAB keydown: focusing next element as determined by \`tabIndex\`](https://stackoverflow.com/questions/7303507/simulating-the-tab-keydown-focusing-next-element-as-determined-by-tabindex) — Andrew Myers, Dec 21 '17 at 21:51

czerasz · Accepted Answer · 2012-02-10T08:25:41.727

19

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

edited Feb 10 '12 at 08:25

answered Feb 09 '12 at 16:03

czerasz

13,682
9
53
63

5

Thanks, but this only works if a following sibling element is found, or am I mistaken? But it should work in any case. – AGuyCalledGerald Feb 09 '12 at 16:16
Do You want to loop the elements? – czerasz Feb 09 '12 at 16:18
If the elements are like this will not working. `
– vee Aug 28 '18 at 09:06

Mark Lagendijk · Answer 2 · 2013-09-11T19:23:31.167

12

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

edited Sep 11 '13 at 19:23

answered Sep 11 '13 at 12:06

Mark Lagendijk

6,247
2
36
24

thanks, i didn't used the hole plugin but the selector with :tabbable was a nice brain shot :P – prdatur Jun 27 '14 at 09:40
1

please note that `:tabbable` requres jQuery UI dependency – Alex from Jitbit Sep 23 '19 at 19:53
I like it! For my use case, I modified the javascript to include `selectables.eq(prevIndex).select();` at the end of each function to also simulate the way the tab key selects the contents of the next input. – Dave Smash Oct 01 '19 at 21:48

score 11 · Answer 3 · edited Jun 29 '16 at 04:20

11

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

edited Jun 29 '16 at 04:20

Aditya Jhunjhunwala

635
6
19

answered Dec 31 '14 at 11:18

Shehbaz

81
2
10

This is almost perfect for my project, but I needed it not to tab to every single radio button. A loop to skip inputs with the same name did the trick. `var nextInput = $('input,select,textarea')[$('input,select,textarea').index(this)+1]; while ($(this).attr('name') === $(nextInput).attr('name')) { nextInput = $('input,select,textarea')[$('input,select,textarea').index(nextInput)+1]; } ` It still gets stuck inside hidden inputs. Usually they could be at the top of the form, but I have a conditionally hidden input that has to reappear in the right place. – malcanso Jul 10 '15 at 04:49
1

`if (keyCode === 13) {` is better – Artur A Sep 10 '15 at 06:39

score 4 · Answer 4 · answered Feb 09 '12 at 15:58

4

Try this

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

answered Feb 09 '12 at 15:58

Shai Mishali

9,224
4
56
83

8

Thanks, but it still doesn´t react. – AGuyCalledGerald Feb 09 '12 at 16:10
Check the JS Console for errors, also try running the code separately in a clean HTML file and see if you can produce the specific situation needed. Than try to move it to your master file. – Shai Mishali Feb 09 '12 at 17:09
2

Can you provide a good fiddle for that? Because I tried it, and it didn't work. See [here](http://jsfiddle.net/saeedneamati/gtbUp/). – Saeed Neamati Sep 10 '13 at 05:03
3

Doesn't work for me either - [Code Pen](http://codepen.io/anon/pen/yYNLjE?editors=101). – Adam Zerner Sep 06 '15 at 22:31
@SaeedNeamati I have updated the fiddle. `$(function() { $('#first').focus(); $('button').click(function() { $('#first').trigger({ type: 'keypress', which: 9 }); }); $('#first').on('keypress', function(e) { if (e.which == 9) { alert("Tab Pressed!"); $(this).next().focus(); } }); });` – stackuser Sep 26 '18 at 08:31

Simulate pressing tab key with jQuery

4 Answers4

Linked