Как реализовать чтобы при достижении определенного количества символов в инпуте создавался новый инпут?

Question

[Jason12]

Как реализовать чтобы при переполнении текста в инпуте создавался новый инпут и написание текста начиналось уже оттуда.
Как правильно рассчитать символы? value.length это понятно но может есть более универсальние варианты

Answer 1

[0xD34F]

<div class="container">
  <input maxlength="10">
</div>

const container = document.querySelector('.container');
const input = container.querySelector('input').cloneNode();

container.addEventListener('input', ({ target: t }) => {
  if (t.value.length === +t.maxLength) {
    const nextInput = t.nextElementSibling || input.cloneNode();
    t.insertAdjacentElement('afterend', nextInput);
    nextInput.focus();
  }
});

Comments

[Jason12]

да но как реализовать так чтобы в инпут нельзя было вводить больше чем 20 символов например

[0xD34F]

обновил ответ

Answer 2

[Влад]

А почему не value.length? Можно, конечно, записывать нажатие клавиши и потом все их считать, а от них уже задавать определенное условие. Так что, думаю value.length будет вполне универсальным решением.

Comments

[Jason12]

А как перенос на новый инпут сделать?

[Влад]

Jason12, element.focus();

[Jason12]

Влад, не сработал вариант

[Влад]

Jason12, может, в коде что-то не так?

[Jason12]

Влад, Влад, https://codepen.io/anon/pen/dZazBO

[Jason12]

Влад, после второго инпута все ломается и неполучается жестко задать символы в инпуте все равно потом можно вернуться и дрписать

[Влад]

Jason12, скорее всего проблема на Вашей стороне, у меня все отлично работает, только вот после второго поля создается еще третье.

[Jason12]

Влад, как создается 3??

[Влад]

Jason12, странно, у меня буквально пару минут создавалось третье и еще несколько полей, сейчас уже такого нет.

[vetsmen]

Влад, 3 поле не может создаваться, ибо при инициализации второго инпута на него не вешается eventlistener

[Влад]

vetsmen, видимо у меня баг просто произошел.