найти следующий с jquery, когда нет родного брата

Question

После ввода maxlength количества символов на входе мне нужно сфокусироваться на следующем входе. Вопрос заключается в том, что следующий вход не всегда родственный:

jQuery("input").on('input', function() { 
 
    if (jQuery(this).val().length == jQuery(this).attr('maxlength')) { 
 
    jQuery(this).next("input").focus(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
When you have write 4 char, the focus have to switch to the next input: 
 
<div> 
 
    OK 
 
    <input maxlength="4"> 
 
    <input maxlength="4"> 
 
</div> 
 
KO 
 
<input id="inputWithTheIssue">

Answer 1

Вы не можете использовать функцию .next() поскольку все inputs не являются братьями и сестрами. Поэтому вам нужно найти index текущего ввода во всем наборе элементов управления вводом и увеличить его на 1, чтобы найти следующий входящий элемент ввода.

jQuery("input").on('input',function() { 
      if(jQuery(this).val().length == jQuery(this).attr('maxlength')) { 
       var currIndex = $(this).index(); // gets the index value w.r.t the other input controls 
       $('input').eq(currIndex + 1).focus(); 
      } 
     }); 

Рабочий пример: https://jsfiddle.net/DinoMyte/uhpn7pyx/2/

Answer 2

Есть несколько вещей, которые вы должны сделать.

1. Добавить атрибут [type = "text"] к вашим элементам.
2. Используйте правильный родительский элемент, чтобы получить дочерние входы. (Я использую документ в качестве родителя, который не может быть благоприятным для сценария.)

var $check = $(document).find('input[type="text"]'); 
 
jQuery("input").on('input', function() { 
 
    if (jQuery(this).val().length == jQuery(this).attr('maxlength')) { 
 
    $check.eq($check.index(this) + 1).focus(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
When you have write 4 char, the focus have to switch to the next input: 
 
<div> 
 
    OK 
 
    <input maxlength="4" type="text"> 
 
    <input maxlength="4" type="text"> 
 
</div> 
 
KO 
 
<input id="inputWithTheIssue" type="text">

Answer 3

Вы явно просят решение JQuery, но вы можете сделать это действительно легко в чистом JavaScript, без необходимости включать любую библиотеку.

function inputChanged(element, index, array) { 
 
    element.oninput = function() { 
 
    if (element.value.length >= 4 && (index < array.length - 1)) { 
 
     array[index + 1].focus(); 
 
    } 
 
    } 
 
} 
 

 
Array.from(document.getElementsByTagName('input')).forEach(inputChanged);

<div> 
 
    <input maxlength="4"/> 
 
    <input maxlength="4"/> 
 
</div> 
 
<input id="inputWithTheIssue"/>

Что я делаю здесь вызова inputChanged функции для каждого input в документе. Эта функция принимает параметр:

• element который содержит элемент, который его вызвал,
• index, который содержит информацию, которая input среди всех них ссылалась на эту функцию, и
• array, который хранит все эти input с.

Внутри этой функции на входе пользователя проверить, если:

• данный элемент имеет значение 4 или более, и
• , если мы не на последнем месте среди всех input с ,

Если это так, мы фокусируем следующий элемент на массив.

Даже если вам нужен способ jQuery для решения вашей проблемы, я надеюсь, что вы или кто-то другой тоже найдете этот ответ полезным.