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
– David Thomas, Commented Feb 9, 2012 at 15:55
Can you clarify "doesn't work"? What happens? Get any JS-errors? — Christofer Eliasson
– Christofer Eliasson, Commented Feb 9, 2012 at 15:56
Possible duplicate of Simulating the TAB keydown: focusing next element as determined by `tabIndex` — Andrew Myers
– Andrew Myers, Commented Dec 21, 2017 at 21:51

czerasz · Accepted Answer · 2012-02-10 08:25:41Z

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, 2012 at 8:25

answered Feb 9, 2012 at 16:03

czerasz

14.4k10 gold badges56 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

AGuyCalledGerald Over a year ago

Thanks, but this only works if a following sibling element is found, or am I mistaken? But it should work in any case.

czerasz Over a year ago

Do You want to loop the elements?

vee Over a year ago

If the elements are like this will not working. <input class="input"><br><input class="input"><button> Enter on first input can't find next input but found br. Use next('.input') still not working.

Aditya Jhunjhunwala · Accepted Answer · 2016-06-29 04:20:03Z

13

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, 2016 at 4:20

Aditya Jhunjhunwala

6356 silver badges19 bronze badges

answered Dec 31, 2014 at 11:18

Shehbaz

1012 silver badges10 bronze badges

2 Comments

malcanso Over a year ago

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.

Artur Ampilogov Over a year ago

if (keyCode === 13) { is better

Mark Lagendijk · Accepted Answer · 2013-09-11 19:23:31Z

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, 2013 at 19:23

answered Sep 11, 2013 at 12:06

Mark Lagendijk

7,0292 gold badges41 silver badges31 bronze badges

3 Comments

prdatur Over a year ago

thanks, i didn't used the hole plugin but the selector with :tabbable was a nice brain shot :P

Alex from Jitbit Over a year ago

please note that :tabbable requres jQuery UI dependency

Dave Smash Over a year ago

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.

Shai Mishali · Accepted Answer · 2012-02-09 15:58:53Z

5

Try this

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

answered Feb 9, 2012 at 15:58

Shai Mishali

9,4425 gold badges60 silver badges83 bronze badges

5 Comments

AGuyCalledGerald Over a year ago

Thanks, but it still doesn´t react.

Shai Mishali Over a year ago

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.

Saeed Neamati Over a year ago

Can you provide a good fiddle for that? Because I tried it, and it didn't work. See here.

Adam Zerner Over a year ago

Doesn't work for me either - Code Pen.

Fakhar Zaman Over a year ago

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

Collectives™ on Stack Overflow

Simulate pressing tab key with jQuery

4 Answers 4

3 Comments

2 Comments

3 Comments

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

3 Comments

5 Comments

Linked

Related