Как перенести фокус на следующий ввод с помощью jQuery?

Ответ 1

Вы можете сделать что-то вроде этого:

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

Другие ответы, размещенные здесь, могут не сработать для вас, поскольку они зависят от следующего ввода, являющегося самым следующим элементом брата, что часто бывает не так. Этот подход подходит к форме и ищет следующий элемент типа ввода.

Ответ 2

JQuery UI уже имеет это, в моем примере ниже я включил атрибут maxchar, чтобы сфокусироваться на следующем объекте с фокусировкой (ввод, выбор, textarea, кнопка и объект), если я набрал максимальное количество символов

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

Ответ 3

Что имел в виду Сэм:

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

Ответ 4

Попробуйте использовать что-то вроде:

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

Ответ 5

почему бы просто не просто ввести поле ввода, где вы хотите перейти к id и сделать простой фокус

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

Ответ 6

Не могли бы вы разместить некоторые из ваших HTML файлов?

В среднем, попробуйте следующее:

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

Это непроверено, так что, вероятно, это потребует некоторой настройки.

Ответ 7

Я только что написал плагин jQuery, который делает то, что вы ищете (раздраженный тем, что я не смог найти решение yy самостоятельно (tabStop → http://plugins.jquery.com/tabstop/)

Ответ 8

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

Ответ 9

если вы используете event.preventDefault() в своем script, а затем комментируете его, потому что IE не нравится.

Ответ 10

Самый простой способ - удалить его из индекса вкладки все вместе:

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

Я уже использую это в нескольких формах.

Ответ 11

Вот что сработало в моем случае. Может быть меньше производительности.

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

Ответ 12

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

Ответ 13

Используйте eq, чтобы перейти к определенному элементу.

Документация о 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"  />

Ответ 14

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

Это может работать, если ваше следующее поле - другое.