Как при заполнении 4 input выполнить функцию js?

Question

[WebforSelf]

Есть 4 input

<div class="flex_code">
                          <input class="inputs code_1" value="" type="tel"  pattern="[0-9]*"   maxlength="1"  >
                          <input class="inputs code_2" value="" type="tel"  pattern="[0-9]*"   maxlength="1"  >
                          <input class="inputs code_3" value="" type="tel"  pattern="[0-9]*"  maxlength="1"  >
                          <input class="inputs code_4" value="" type="tel"  pattern="[0-9]*"   maxlength="1">
                      </div>

Есть функция которая при заполнении 1 значения перекидывает на следующее

$(function() {
    $(".inputs").keyup(function () {
        if (this.value.length == this.maxLength) {
          $(this).next('.inputs').focus();
        }
    });
});

Дальше есть фукция

$(".inputs").on("change", function() {
//тут код функции
});

Вопрос, как сделать чтоб при заполнении всех 4 input выполнялась последняя функция автоматически?
сейчас приходится после ввода 4 значений кликать на свободную область чтоб запустить
$(".inputs").on("change", function()

Answer 1

[0xD34F]

const inputs = [...document.querySelectorAll('.input')];
inputs.forEach(n => n.addEventListener('input', onInput));

function onInput({ target: t }) {
  if (t.value.length === t.maxLength) {
    t.nextElementSibling?.focus();
  }

  if (inputs.every(n => n.value.length === n.maxLength)) {
    // здесь дёргаете свою функцию
  }
}

Comments

[altkov]

Зачем писать обычный js, если у автора jquery?

[ForSureN1]

altkov, в чем проблема переписать на jquery ?

Answer 2

[Rst0]

Comments

[WebforSelf]

Интересно а при удалении обратно перекидывало чтоб на поле? к примеру я очищаю 3 input он перекидывает на 2

[Rst0]

к примеру я очищаю 3 input он перекидывает на 2

вы очистили 3 и вас перебрасывает на 2
и потом снова возвращает на 3, ведь 2 введен полностью по условиям