мне нужно создать виртуальную клавиатуру с несколькими входами и автоматическим переходом к следующему вводу после достижения максимальной длины (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>
@Yogi Не могли бы вы помочь мне с моим кодом, пожалуйста? а подскажите как должен быть весь правильный код?
Можете ли вы попробовать это:
Чтобы расширить количество входов, проверьте длину входа по порядку, если первый равен 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>
Спасибо, это именно то, что мне было нужно!
Вы опубликовали этот же вопрос и код вчера (по-видимому, удалены сейчас). И ответ тот же, что и вчера: входы не могут иметь одинаковый идентификатор "tbInput". Есть и множество других ошибок. Переменная tbInput2 никогда не инициализируется, метод "contains()" не определен и т.д.