Виртуальная клавиатура с несколькими входами и автоматическим переходом к следующему вводу после достижения максимальной длины?

мне нужно создать виртуальную клавиатуру с несколькими входами и автоматическим переходом к следующему вводу после достижения максимальной длины (1)... в моем коде есть 2 ввода, которые я должен заполнить, но я могу заполнить только первый ввод, а не второй. и автоматический переход к следующему полю тоже должен работать, кто-нибудь может мне помочь с этим?

(есть 2 входа в действие, а другие (только для чтения), и пользователю нужно нажать на цифру, и он должен заполнить первый ввод в виде 1 числа и автоматически перейти к следующему входу в действие и снова нажать на другую цифру, и он должен написать другой номер и все)

Вот мой код.

<body onload = "load();"> 
<div class = "firma-box-resultado" style = "display: flex; justify-content: center; align-items: center;">
        <input type = "text" id = "" class = "num-coordenada" readonly = "">
        <input type = "text" id = "tbInput" class = "num-coordenada active completo" maxlength = "1">
        <input type = "text" id = "tbInput" class = "num-coordenada active completo" maxlength = "1">
        <input type = "text" id = "" class = "num-coordenada" readonly = "">
        <input type = "text" id = "" class = "num-coordenada" readonly = "">
        <input type = "text" id = "" class = "num-coordenada" readonly = ""></div>


    </div>


<div id = "VirtualKey">
            <input class = "clave" id = "btn1" type = "button" onclick = "input(this);" value = "3" style = "margin-right:1px;" />
            <input class = "clave" id = "btn2" type = "button" onclick = "input(this);" value = "8" style = "margin-right:1px;" />
            <input class = "clave" id = "btn3" type = "button" onclick = "input(this);" value = "7" style = "margin-right:1px;" />
            <input class = "clave" id = "btn4" type = "button" onclick = "input(this);" value = "0" style = "margin-right:1px;" />
            <input class = "clave" id = "btn5" type = "button" onclick = "input(this);" value = "2" style = "margin-bottom:5px;" />
            <br />
            <input class = "clave" id = "btn6" type = "button" onclick = "input(this);" value = "1" style = "margin-right:1px;" />
            <input class = "clave" id = "btn7" type = "button" onclick = "input(this);" value = "9" style = "margin-right:1px;" />
            <input class = "clave" id = "btn8" type = "button" onclick = "input(this);" value = "4" style = "margin-right:1px;" />
            <input class = "clave" id = "btn9" type = "button" onclick = "input(this);" value = "5" style = "margin-right:1px;" />
            <input class = "clave" id = "btn0" type = "button" onclick = "input(this);" value = "6" style = "margin-right:1px;" />
            <br />
            <br />
            <input id = "btnDel" type = "button" value = "Borrar" onclick = "del();" />
        </div>



<script type = "text/javascript">
        function input(e) {
            var tbInput = document.getElementById("tbInput");
            tbInput.value = tbInput.value + e.value;
            tbInput2.value = tbInput2.value + e.value;
        }


        function del() {
            var tbInput = document.getElementById("tbInput");
            tbInput.value = tbInput.value.substr(0, tbInput.value.length - 1);
        }




        function load() {
            var array = new Array();

            while (array.length < 10) {
                var temp = Math.round(Math.random() * 9);
                if (!contain(array, temp)) {
                    array.push(temp);
                }
            }
            for (i = 0; i < 10; i++) {
                var btn = document.getElementById("btn" + i);
                btn.value = array[i];
            }
        }


        let $inputs = $('.firma-box-resultado input').on('input', e => {
          let $input = $(e.target);
          let index = $inputs.index($input);
          
          if ($input.val().length >= $input.prop('maxlength')) {
            $inputs.eq(index + 1).prop('enabled', false).focus();
          } 
        });

        </script>

</body>

Вы опубликовали этот же вопрос и код вчера (по-видимому, удалены сейчас). И ответ тот же, что и вчера: входы не могут иметь одинаковый идентификатор "tbInput". Есть и множество других ошибок. Переменная tbInput2 никогда не инициализируется, метод "contains()" не определен и т.д.

Yogi 12.02.2023 00:41

@Yogi Не могли бы вы помочь мне с моим кодом, пожалуйста? а подскажите как должен быть весь правильный код?

Pegasus 12.02.2023 08:58
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
51
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Можете ли вы попробовать это:

Чтобы расширить количество входов, проверьте длину входа по порядку, если первый равен 0 (пустой), заполните его, если нет, проверьте следующий...

if (tbInput.val().length == 0) {
   tbInput.val(e.value);
}
else if (tbInput2.val().length == 0) 
   tbInput2.val(e.value);
else {
   tbInput3.val(e.value);
}

function input(e) {
            var tbInput = $("#tbInput");
            var tbInput2 = $("#tbInput2");
            var tbInput3 = $("#tbInput3");
            
            if (tbInput.val().length == 0) {
              tbInput.val(e.value);
            }
            else if (tbInput2.val().length == 0) 
              tbInput2.val(e.value);
            else {
              tbInput3.val(e.value);
            }
        }


        function del() {
            var tbInput = $(".num-coordenada"); 
            tbInput.val('');
        }




        function load() {
            var array = new Array();

            while (array.length < 10) {
                var temp = Math.round(Math.random() * 9);
                if (!contain(array, temp)) {
                    array.push(temp);
                }
            }
            for (i = 0; i < 10; i++) {
                var btn = document.getElementById("btn" + i);
                btn.value = array[i];
            }
        }


          let $inputs = $('.firma-box-resultado input').on('input', e => {
          let $input = $(e.target);
          let index = $inputs.index($input);
          
          if ($input.val().length >= $input.prop('maxlength')) {
            $inputs.eq(index + 1).prop('enabled', false).focus();
          } 
        });
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body onload = "load();">

    <div class = "firma-box-resultado" >
    
        <input type = "text" id = "tbInput" class = "num-coordenada active completo" maxlength = "1">
        <input type = "text" id = "tbInput2" class = "num-coordenada active completo" maxlength = "1">
        <input type = "text" id = "tbInput3" class = "num-coordenada" readonly = "">
        <input type = "text" class = "num-coordenada" readonly = "">
        <input type = "text" class = "num-coordenada" readonly = "">
    </div>


<div id = "VirtualKey">
            <input class = "clave" id = "btn1" type = "button" onclick = "input(this);" value = "3" style = "margin-right:1px;" />
            <input class = "clave" id = "btn2" type = "button" onclick = "input(this);" value = "8" style = "margin-right:1px;" />
            <input class = "clave" id = "btn3" type = "button" onclick = "input(this);" value = "7" style = "margin-right:1px;" />
            <input class = "clave" id = "btn4" type = "button" onclick = "input(this);" value = "0" style = "margin-right:1px;" />
            <input class = "clave" id = "btn5" type = "button" onclick = "input(this);" value = "2" style = "margin-bottom:5px;" />
            <br />
            <input class = "clave" id = "btn6" type = "button" onclick = "input(this);" value = "1" style = "margin-right:1px;" />
            <input class = "clave" id = "btn7" type = "button" onclick = "input(this);" value = "9" style = "margin-right:1px;" />
            <input class = "clave" id = "btn8" type = "button" onclick = "input(this);" value = "4" style = "margin-right:1px;" />
            <input class = "clave" id = "btn9" type = "button" onclick = "input(this);" value = "5" style = "margin-right:1px;" />
            <input class = "clave" id = "btn0" type = "button" onclick = "input(this);" value = "6" style = "margin-right:1px;" />
            <br />
            <br />
            <input id = "btnDel" type = "button" value = "Borrar" onclick = "del();" />
        </div>

</body>

Спасибо, это именно то, что мне было нужно!

Pegasus 12.02.2023 14:00

Другие вопросы по теме