javascript - How do I move focus to next input with jQuery? - Stack Overflow

admin管理员组

文章数量:1135109

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?

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?

• javascript
• jquery
• autocomplete

Share Improve this question Follow edited Dec 7, 2019 at 0:44 Jacob 3,69844 gold badges3737 silver badges5858 bronze badges asked Mar 16, 2010 at 14:38 MattMatt 5,6601414 gold badges4949 silver badges5959 bronze badges 3

• 1 ? What do you mean. Why should the focus move to the input field if you select something in the autocompleter? – jitter 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. – Matt 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? – jpgerb Commented May 23, 2022 at 18:13

Add a comment  | 

15 Answers 15

Sorted by: Reset to default 96

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.

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

What Sam meant was :

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

Try using something like:

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

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

$("#newListField").focus();

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"  />

you can use

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

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.

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/)

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

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

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.

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

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

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

onchange="$('select')[$('select').index(this)+1].focus()"

This may work if your next field is another select.

本文标签： javascriptHow do I move focus to next input with jQueryStack Overflow