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

Question

[Володимир Паламар]

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

id="char1"

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

<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>

Как это сделать?

Comments

[Kovalsky]

https://reactjsexample.com/react-component-for-ent...

[Сергей Соколов]

мне кажется, там даже не нужны «честные» input'ы. Ловить лучше нажатия на клавиши, в переменной держать введенную строку. И отображать её на псевдо-инпутах.
Ведь нельзя разрешить, скажем, кликнуть не на следующем, а через один, и начать вводить там? Сейчас такое возможно в обоих решениях.

Answer 1

[hzzzzl]

UPD

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

если value === '', то фокус на предыдущий, а не на следующий

Comments

[Володимир Паламар]

когда нажимаю удалить в ячейке пишет undefinded

[hzzzzl]

Володимир Паламар, ну так почини :)

e.target.value = e.target.value[e.target.value.length - 1] || ''

[Володимир Паламар]

hzzzzl, сейчас стирает но назад не возвращает

[art style]

когда ввел буквы а они не стираются

[Сергей Соколов]

1. можно перескочить на через один и вводить там.
2. удаление оставляет "undefined"

[hzzzzl]

Сергей Соколов, ну и я не буду тут готовые компоненты с тестами писать, дальше человек сам уже по мотивам дописал как ему надо было

[Володимир Паламар]

Сергей Соколов, я уже свё исправил

Answer 2

[Володимир Паламар]

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()
  }}
  
}

Answer 3

[Mors Clamor]

Есть такое свойство как focus и событие onchange. Грубо говоря, отслеживаете нажатия клавиш в этих полях и меняете фокус на другое поле, если надо

Comments

[Володимир Паламар]

Но это будет работать только в одну сторону

[Володимир Паламар]

66demon666, И onchange работает только тогда когда ты уже вышел из инпута

[Mors Clamor]

Володимир Паламар, в зависимости от того, что вы напишете, может работать и в обе. Например, при нажатии backspace или delete возвращать фокус на 1 поле назад?

[Mors Clamor]

66demon666, я привел примеры навскидку, нужные методы подбирайте сами, основной алгоритм вам дали