Как из нескольких инпутов сделать один?

Есть несколько ячеек, каждая из них пронумерована от одного до шести:

id="char1"

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

5e82655f2e426637386853.png

<div class="security-code-container force-ltr">
   <div class="field-wrap force-ltr">
      <input maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="off" spellcheck="false" type="tel" id="char0" class="form-control force-ltr form-textbox char-field" aria-label="Ввод кода проверки Цифра 1" placeholder="" aria-describedby="idms-input-error-1585602997206-1" data-index="0">
   </div>
   <div class="field-wrap force-ltr">
      <input maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="off" spellcheck="false" type="tel" id="char1" class="form-control force-ltr form-textbox char-field" aria-label="Цифра 2" placeholder="" aria-describedby="idms-input-error-1585602997206-1" data-index="1">
   </div>
   <div class="field-wrap force-ltr">
      <input maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="off" spellcheck="false" type="tel" id="char2" class="form-control force-ltr form-textbox char-field" aria-label="Цифра 3" placeholder="" aria-describedby="idms-input-error-1585602997206-1" data-index="2">
   </div>
   <div class="field-wrap force-ltr">
      <input maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="off" spellcheck="false" type="tel" id="char3" class="form-control force-ltr form-textbox char-field" aria-label="Цифра 4" placeholder="" aria-describedby="idms-input-error-1585602997206-1" data-index="3">
   </div>
   <div class="field-wrap force-ltr">
      <input maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="off" spellcheck="false" type="tel" id="char4" class="form-control force-ltr form-textbox char-field" aria-label="Цифра 5" placeholder="" aria-describedby="idms-input-error-1585602997206-1" data-index="4">
   </div>
   <div class="field-wrap force-ltr">
      <input maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="off" spellcheck="false" type="tel" id="char5" class="form-control force-ltr form-textbox char-field" aria-label="Цифра 6" placeholder="" aria-describedby="idms-input-error-1585602997206-1" data-index="5">
   </div>
</div>


Как это сделать?
  • Вопрос задан
  • 226 просмотров
Решения вопроса 2
hzzzzl
@hzzzzl


UPD
при удалении возвращается обратно

если value === '', то фокус на предыдущий, а не на следующий
Ответ написан
GORNOSTAY25
@GORNOSTAY25 Автор вопроса
html
<input type=text data-n=1>
<input type=text data-n=2>
<input type=text data-n=3>
<input type=text data-n=4>
<input type=text data-n=5>
<input type=text data-n=6>


JS
const ins = document.querySelectorAll('input')

ins.forEach(i => i.addEventListener('input', onInput))

function onInput(e) {
  e.target.value = e.target.value[e.target.value.length - 1] || "";
  const n = e.target.dataset.n
  const next = document.querySelector(`input[data-n="${+n + 1}"]`)

if(e.target.value == ""){
  if(n==1){
  document.querySelector(`input[data-n=1]`).focus();
  }
  else{
  document.querySelector(`input[data-n="${+n - 1}"]`).focus();
  }
  }else{
  if (next) {
    next.focus()
  }}
  
}
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@66demon666
По навыкам джун - по факту безработный
Есть такое свойство как focus и событие onchange. Грубо говоря, отслеживаете нажатия клавиш в этих полях и меняете фокус на другое поле, если надо
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы