Перенести фокус на другой input при вводе конкретной длины в текущий

@d3v1ldream · Регистрация: 31.03.2016

Студворк — интернет-сервис помощи студентам

Имееться 4 поля input, в каждый поочередно вводиться по 2 числа, не могу сделать так, что бы вводе в первый инпут 2 чисел, вокус переходил на второй и тд.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Validation</title>
 
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>Введите данные для авторизации</h1>
    <div class="valid-app">
        <p>
            Ваши пароль, введите его в поле
        </p>
        <span class = "valid-code">
    
        </span>
    <form action="#" name = "validation">
        <input type="text" name = "a" class="valid-input" pattern = "[0-9]{2}" maxlength="2" onkeydown = "checkNum();" autofocus>
        <input type="text" name = "b" class="valid-input" pattern = "[0-9]{2}" onkeydown = "checkNum();"maxlength="2">
        <input type="text" name = "c" class="valid-input" pattern = "[0-9]{2}" maxlength="2" onkeydown = "checkNum();">
        <input type="text" name = "d" class="valid-input" pattern = "[0-9]{2}" maxlength="2" onkeydown = "checkNum();"><br>
        
    </form>
   <button class="check-btn" onclick="validateNumber()">CHECK</button>
 
    <script src="js/index.js"></script>
 
</div>
</body>
</html>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var codeArray = [];
for (var i = 0; i < 4; i++) {
    codeArray.push(Math.floor(Math.random() * 90 + 10))   
}
for (var i = 0; i < 4; i++){
    document.querySelector(".valid-code").innerHTML += ` - ${codeArray[i]} -`;
}
 function checkNum(){
    // var key = e.charCode || e.keyCode || 0;
    var key;
 
    return ( key == 8 || key == 9 || key == 46 ||(key >= 37 && key <= 40) ||(key >= 48 && key <= 57) ||(key >= 96 && key <= 105) || key == 107 || key == 109 || key == 173|| key == 61  );
    
 }
 
function validateNumber(){
    if((codeArray[0] == validation.a.value) && (codeArray[1] == validation.b.value) && (codeArray[2] == validation.c.value) && ((codeArray[3] == validation.d.value))){
      alert('All is OK!');
    }
    else{
        alert("False");
    }
}
 
for(var i = 0; i < 4; i++){
    if(document.querySelector(".valid-input")[0].value.length == 2){
        document.querySelector(".valid-input")[1].focus();
    }
}

@kidASM · 19.08.2019, 12:40

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Test</title>
        <style>
            button {
                margin-top: 20px;
            }
        </style>
    </head>
    <body>
        <h1>Введите данные для авторизации</h1>
        <div class="valid-app">
            <p>Ваши пароль, введите его в поле</p>
            <span class = "valid-code"></span>
            <form action="#" name = "validation">
                <input type="text" name = "a" class="valid-input" pattern = "[0-9]{2}" maxlength="2">
                <input type="text" name = "b" class="valid-input" pattern = "[0-9]{2}" maxlength="2">
                <input type="text" name = "c" class="valid-input" pattern = "[0-9]{2}" maxlength="2">
                <input type="text" name = "d" class="valid-input" pattern = "[0-9]{2}" maxlength="2">
            </form>
            <button class="check-btn" onclick="validateNumber()">CHECK</button>
        </div>
        <script>
            var form = document.forms.validation;
            if(form){
                form.addEventListener('keypress', function(event){
                    var inputIndex = getIndexFromSet(form, event.target);
                    if(event.target.value.length >= parseInt(event.target.getAttribute('maxlength'))-1){
                        if(inputIndex < form.length-1){
                            form[inputIndex+1].focus();
                        }
                        else{
                            form[0].focus();
                        }
                    }
                });
            }
            function getIndexFromSet(set, elm){
                var setArr = [].slice.call(set);
                for( var i in setArr ){
                    if( setArr[i] == elm ){
                        return parseInt(i);
                    };
                }
            }
        </script>
    </body>
</html>

Добавлено через 29 минут
Нашел баг, так будет работать правильно

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Test</title>
        <style>
            button {
                margin-top: 20px;
            }
        </style>
    </head>
    <body>
        <h1>Введите данные для авторизации</h1>
        <div class="valid-app">
            <p>Ваши пароль, введите его в поле</p>
            <span class = "valid-code"></span>
            <form action="#" name = "validation">
                <input type="text" name = "a" class="valid-input" pattern = "[0-9]{2}" maxlength="2">
                <input type="text" name = "b" class="valid-input" pattern = "[0-9]{2}" maxlength="2">
                <input type="text" name = "c" class="valid-input" pattern = "[0-9]{2}" maxlength="2">
                <input type="text" name = "d" class="valid-input" pattern = "[0-9]{2}" maxlength="2">
            </form>
            <button class="check-btn" onclick="validateNumber()">CHECK</button>
        </div>
        <script>
            var form = document.forms.validation;
            if(form){
                form.addEventListener('keyup', function(event){
                    var inputIndex = getIndexFromSet(form, event.target);
                    if(event.target.value.length >= parseInt(event.target.getAttribute('maxlength'))){
                        if(inputIndex < form.length-1){
                            form[inputIndex+1].focus();
                        }
                        else{
                            form[0].focus();
                        }
                    }
                });
            }
            function getIndexFromSet(set, elm){
                var setArr = [].slice.call(set);
                for( var i in setArr ){
                    if( setArr[i] == elm ){
                        return parseInt(i);
                    };
                }
            }
        </script>
    </body>
</html>

@d3v1ldream · 19.08.2019, 14:36 **[ТС]**

kidASM, А сделать обратный порядок? Ну тип когда стираешь данные, и курсор возращается на преидущюю)

@kidASM · 19.08.2019, 14:50

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var form = document.forms.validation;
if(form){
    form.addEventListener('keyup', function(event){
        var inputIndex = getIndexFromSet(form, event.target);
        if(event.target.value.length >= parseInt(event.target.getAttribute('maxlength'))){
            if(inputIndex < form.length-1){
                form[inputIndex+1].focus();
            }
            else{
                form[0].focus();
            }
        }
        if(event.target.value.length == 0){
            if(inputIndex > 0){
                form[inputIndex-1].focus();
            }
            else{
                form[form.length-1].focus();
            }
        }
    });
}
function getIndexFromSet(set, elm){
    var setArr = [].slice.call(set);
    for( var i in setArr ){
        if( setArr[i] == elm ){
            return parseInt(i);
        };
    }
}

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@d3v1ldream 0 / 0 / 0 Регистрация: 31.03.2016 Сообщений: 36
	19.08.2019, 14:36 [ТС]
	kidASM, А сделать обратный порядок? Ну тип когда стираешь данные, и курсор возращается на преидущюю) 0

Перенести фокус на другой input при вводе конкретной длины в текущий

Решение