50

I am using the autocomplete plugin with jQuery and it is working fine. However, in IE, when the user selects an item in the autocomplete, the focus does not then move to the next input field. Naturally it works in Firefox. The plugin doesn't have a built-in solution but does provide for "options". Is there a way I can force it to move to the next input field?

Improve this question
3
  • 1
    ? What do you mean. Why should the focus move to the input field if you select something in the autocompleter? Commented Mar 16, 2010 at 14:40
  • my "form" is actually a <table> and the next input is a <td> inside the same table. Yes, I need it to move to the next input after something is selected in the autocompleter. Commented Mar 16, 2010 at 18:29
  • I know this is 12 years old, but I don't suppose you have any script to look at? Commented May 23, 2022 at 18:13

15 Answers 15

Reset to default
97

You can do something like this:

$("input").change(function() { var inputs = $(this).closest('form').find(':input'); inputs.eq( inputs.index(this)+ 1 ).focus(); });

The other answers posted here may not work for you since they depend on the next input being the very next sibling element, which often isn't the case. This approach goes up to the form and searches for the next input type element.

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

5 Comments

'input:visible,select:visible' works a bit better, finds select boxes and skips hidden fields.
see this answer also: stackoverflow.com/questions/7303507/… as it takes into account tabindex as would be done by the real browser.
this answer got many upvotes but wasn't accepted; i guess that's because it relies on the input fields being nested inside a 'form' element
"The other answers posted here may not work for you since they depend on the next input being the very next sibling element, which often isn't the case." -- +1 for being in touch with the real world. Very helpful.
For an input field to work, it should be nested inside a form element.
29

JQuery UI already has this, in my example below I included a maxchar attribute to focus on the next focus-able element (input, select, textarea, button and object) if i typed in the max number of characters

HTML:

text 1 <input type="text" value="" id="txt1" maxchar="5" /><br /> text 2 <input type="text" value="" id="txt2" maxchar="5" /><br /> checkbox 1 <input type="checkbox" value="" id="chk1" /><br /> checkbox 2 <input type="checkbox" value="" id="chk2" /><br /> dropdown 1 <select id="dd1" > <option value="1">1</option> <option value="1">2</option> </select><br /> dropdown 2 <select id="dd2"> <option value="1">1</option> <option value="1">2</option> </select>

Javascript:

$(function() { var focusables = $(":focusable"); focusables.keyup(function(e) { var maxchar = false; if ($(this).attr("maxchar")) { if ($(this).val().length >= $(this).attr("maxchar")) maxchar = true; } if (e.keyCode == 13 || maxchar) { var current = focusables.index(this), next = focusables.eq(current+1).length ? focusables.eq(current+1) : focusables.eq(0); next.focus(); } }); });
Improve this answer

2 Comments

How does this answer have so few upvotes? You can literally copy and paste from $(function() {, down to, }); and once an input field is full, it moved to the next one, and it accounts for an enter press when the user is done. So universal and self-contained. Thanks!
Can also change, "focusables.keyup(function(e) {" to "focusables.keydown(function(e) {" and call e.preventDefault(); to prevent the button's initial behavior from performing. In my case I had a request to make the plus key on the numeric pad mock the tab key, this solution worked great!
11

What Sam meant was :

$('#myInput').focus(function(){ $(this).next('input').focus(); })
Improve this answer

2 Comments

Yeah, wouldn't this just mean that I click one field, but the one that gets selected is the next one?
@Unipartisandev This mean stricly focus. You can focus a element by clicking it, but you can also focus an element using TAB. If you focus by a TAB twice, you got the 4th element because you are "skipping" one of them each time you focus anything.
9

Try using something like:

var inputs = $(this).closest('form').find(':focusable'); inputs.eq(inputs.index(this) + 1).focus();
Improve this answer

2 Comments

Just a heads up, I did not realize that the :focusable pseudo selector required the jQuery UI plugin in case anyone else is getting an error trying to use it.
Elegant and concise. Really nice code! If you want your navigation to emulate keyboard input behavior, :tabbable is probably a better choice than :focusable.
5

why not simply just give the input field where you want to jump to a id and do a simple focus

$("#newListField").focus();
Improve this answer

2 Comments

It is not useful for making generic solution.
As Sandy stated, if you are using code that may be used on several fields, you would have to write a bunch of redundant code.
4

Use eq to get to specific element.

Documentation about index

$("input").keyup(function () { var index = $(this).index("input"); $("input").eq(index + 1).focus(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="text" maxlength="1" /> <input type="text" maxlength="1" /> <input type="text" maxlength="1" /> <input type="text" maxlength="1" /> <input type="text" maxlength="1" /> <input type="text" maxlength="1" />

Improve this answer

Comments

2

you can use

$(document).on("keypress","input,select",function (e) { e.preventDefault(); if (e.keyCode==13) { $(':input).eq($(':input').index(this) + 1)').focus(); } });
Improve this answer

Comments

1

Could you post some of your HTML as an example?

In the mean-time, try this: 

$('#myInput').result(function(){ $(this).next('input').focus(); })

That's untested, so it'll probably need some tweaking.

Improve this answer

1 Comment

@c0mrade That's not what I meant.
1

I just wrote a jQuery plugin that does what you are looking for (annoyed that that I couldn't find andy solution myself (tabStop -> http://plugins.jquery.com/tabstop/)

Improve this answer

Comments

1 
 function nextFormInput() { var focused = $(':focus'); var inputs = $(focused).closest('form').find(':input'); inputs.eq(inputs.index(focused) + 1).focus(); }
Improve this answer

Comments

0

if you are using event.preventDefault() in your script then comment it out because IE doesn't likes it.

Improve this answer

1 Comment

IE likes preventDefault just fine if you actually pass the event as an argument to the function you call it in, like this: $(document).on('click','.mylink',function(event){ event.preventDefault(); });
0

The easiest way is to remove it from the tab index all together:

$('#control').find('input[readonly]').each(function () { $(this).attr('tabindex', '-1'); });

I already use this on a couple of forms.

Improve this answer

Comments

0

Here is what worked in my case. Might be less performance intensive.

$('#myelement').siblings('input').first().focus();
Improve this answer

1 Comment

This will not take into account that the next input may not be an input, but rather a Select, TextArea, Button, etc.
0 
var inputs = $('input, select, textarea').keypress(function (e) { if (e.which == 13) { e.preventDefault(); var nextInput = inputs.get(inputs.index(this) + 1); if (nextInput) { nextInput.focus(); } } });
Improve this answer

1 Comment

Having some form of explanation with the code would also be helpful to SO readers.
-2 
onchange="$('select')[$('select').index(this)+1].focus()"

This may work if your next field is another select.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.