2

Всем привет, не получается одна задачка есть 3 input'а нужно что бы при вводе в первый трёх символов focus переходил на другой input так же и при вводе во второй переходило на третий. И то же самое с удалением из них т.е. если я удалил все символы с 3 input фокус перешел на второй, а при удалении со второго на первый

<form>
    <input type="text" id="inp1"  maxlength="3"  size="3">
    <input type="text" id="inp2"  maxlength="3"  size="3">
    <input type="text" id="inp3"  maxlength="4"  size="4">

</form>
mhz
  • 59
  • 7
  • 1
    Если не получается решить задачу, то наверное вы уже какие-то наработки имеете. Закиньте их плиз – Aliaksandr Pitkevich Jul 04 '17 at 21:08

2 Answers2

3

Каждый раз формируем строку и раскидываем по инпутам.
Вероятно, не будет работать на iOS из-за вызова inp.focus().
Желательно добавить обработку стрелок.
Желательно добавить обработку Delete и Backspace в конце и начале поля соответственно.

document.querySelector('form').addEventListener('input', function (e) {
  var inp = event.target;
  var inps = this.querySelectorAll('input');
  var value = Array.prototype.map.call(inps, x => x.value).join('');
  var i = +inp.dataset.start + inp.selectionStart, pos = value.length;

for (var q=0; q<inps.length; ++q) {
    var start = +inps[q].dataset.start, len = +inps[q].dataset.len;
    inps[q].value = value.substr(start, len);


if (start + len &gt;= i) {
  inp = inps[q];
  pos = i - start;
  i = NaN;
}



}


inp.focus();
  inp.selectionStart = inp.selectionEnd = pos;
})
<form>
  <input type="text" name="inp" data-start="0" data-len="3" size="3">
  <input type="text" name="inp" data-start="3" data-len="3" size="3">
  <input type="text" name="inp" data-start="6" data-len="4" size="4">
</form>
Qwertiy
  • 123,725
  • Спасибо огромное – mhz Jul 05 '17 at 07:23
  • А как его подключать, просто если его вставить между – mhz Jul 05 '17 at 07:59
0

function jmp(e){
    var max = ~~e.getAttribute('maxlength');
    if(max && e.value.length >= max){
        do{
            e = e.nextSibling;
        }
        while(e && !(/text/.test(e.type)));
        if(e && /text/.test(e.type)){
            e.focus();
        }
    }
}
<div>
  <p>Введите серийный номер</p>
    <input type="text" onkeyup="jmp(this);" maxlength="5" size="5">-
    <input type="text" onkeyup="jmp(this);" maxlength="4" size="4">-
    <input type="text" onkeyup="jmp(this);" maxlength="7" size="7">-
    <input type="text" onkeyup="jmp(this);" maxlength="5" size="5">
</div>
  • Спасибо большое, но нужно чтоб еще при удалении оно перескакивало обратно. Я честно говоря, сейчас не очень понимаю что происходит в цикле while поэтому переделать не могу и если я правильно понял то для того чтоб перескакивало обратно нужно использовать previoussibling? – mhz Jul 04 '17 at 21:53