Как при заполнении 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.getElementsByClassName('inputs')];

function onInput() {
  if (this.value.length === this.maxLength) {
    inputs[-~inputs.indexOf(this)]?.focus();
  }

  if (inputs.every(n => n.value.length === n.maxLength)) {
    console.log('ВСЕ ЗАПОЛНЕНЫ');
  }
}

for (const n of inputs) {
  n.addEventListener('input', onInput);
}

или

const inputs = document.querySelectorAll('.inputs');

inputs.forEach(function(n) {
  n.addEventListener('input', this);
}, function({ target: t }) {
  const isFilled = t.value.length === t.maxLength;
  if (isFilled) {
    t.nextElementSibling?.focus();
  }

  if (this[isFilled ? 'add' : 'delete'](t).size === inputs.length) {
    console.log('ВСЕ ЗАПОЛНЕНЫ');
  }
}.bind(new Set));

или, также будем учитывать содержимое атрибута pattern - меняем тег родительского элемента с div на form, инпутам добавляем атрибут required, и

document.querySelector('form').addEventListener('input', e => {
  if (e.target.checkValidity()) {
    e.target.nextElementSibling?.focus();
  }

  if (e.currentTarget.checkValidity()) {
    console.log('ВСЕ ЗАПОЛНЕНЫ');
  }
});

Comments

[altkov]

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

[ForSureN1]

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

Answer 2

[Rst0]

Comments

[WebforSelf]

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

[Rst0]

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

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