См. Изображение. Есть 7 текстовых полей, в которые можно ввести только один символ.Javascript - Почему этот кусок кода Javascript работает в JSFiddle & JSBin, но не в любом браузере?
4 условия должны быть выполнены
Последнее текстовое поле - крайний правый/седьмой текстовое поле будет введено первым, то шестой будет заполнен, то пятый и так далее
Затем самое правое/седьмое значение текстового поля сдвигается (сдвиг влево) до шестого, и таким образом значения сдвигаются до тех пор, пока не будут заполнены все 7 полей
Если мы поместим курсор на любой другой элемент, кроме последнего/седьмого/rightmos t он переместит курсор в крайнее правое.
Будет функция возврата, которая удалит самый правый, т.е. седьмое поле будет удалено первое значение поля будет двигаться ко второму, второй третий, шестой седьмой, как это, правый сдвиг будет происходить таким образом, все элементы должны быть удалены
весь раствор должен быть в Javascript, не JQuery не может быть использован
https://i.stack.imgur.com/dISMA.jpg
Пожалуйста, обратитесь на изображение выше
Javascript Код
var myInputs = document.getElementsByTagName("input");
var myEditable = document.getElementById("seventh");
for (var i = 0; i < myInputs.length; i++) {
myInputs[i].addEventListener("click", function() {
document.getElementById("seventh").focus();
})
}
myEditable.addEventListener("keydown", function(evt) {
/****
* A few things are handled here: we can check if
* the input is a numeric, and we can check if the input
* is a backspace. Nothing else is allowed.
****/
if (evt.which == 8) {
// If a backspace has been pressed, move all the input
// values one field UP.
myEditable.blur();
for (var i = myInputs.length - 1; i >= 1; i--) {
myInputs[i].value = myInputs[i - 1].value;
}
myInputs[0].value = "";
} else if (evt.which >= 48 && evt.which <= 59) {
// Here, we have a number. Everything gets shifted to the LEFT
if (myInputs[0].value == "") {
for (var i = 0; i < myInputs.length - 1; i++) {
myInputs[i].value = myInputs[i + 1].value;
}
myEditable.value = String.fromCharCode(evt.which);
}
} else {
console.log("You did something else...");
}
})
HTML код
<form>
<input type="text" id="first" size="1" maxlength="1" />
<input type="text" id="second" size="1" maxlength="1" />
<input type="text" id="third" size="1" maxlength="1" />
<input type="text" id="fourth" size="1" maxlength="1" />
<input type="text" id="fifth" size="1" maxlength="1" />
<input type="text" id="sixth" size="1" maxlength="1" />
<input type="text" id="seventh" size="1" maxlength="1" />
</form>
В этом коде есть две проблемы
Сначала он работает в JSBin - https://jsbin.com/duxogezake/edit так же она работает в Fiddle, но не в Chrome 55 или любом другом браузер Но он должен работать в хроме любого средства
Когда мы используем забой курсор должен оставаться в последнем/крайнем правом/седьмом текстовом поле, но курсор не остается - мы должны поместить курсор снова & снова в последнем текстовом поле, чтобы сделать операцию (чтение четвертое условие в верхней части до)
Ваш код, вероятно, работает ** перед тем ** DOM-для вашего ''