У меня 70 текстовых полей. Значения в этих полях должны быть или 1 или -1. Суть состоит в том, что при нажатии Q (1) или E (-1), в первое поле должно ввестись значение, а фокус переходит на следующее поле. И так заполняются все 70 полей. Добился только того, что я могу заполнять первое поле. Код:
<html>
<HEAD>
<script>
addEventListener("keydown", function(event) {
if (event.keyCode == 90)
document.getElementById("pole").value = "1"
else
document.getElementById("pole").value = "-1"
});
</script>
</HEAD>
<body>
<form action="0">
<input id="pole" type="text" >
<input id="pole2" type="text" >
</form>
</body>
</html>
В интернете уже искал, есть только частные случаи. Но решения так и не смог добиться. Просьба не закидывать меня ссылками - мол, читай - я уже все прошарил.
У объекта события event
есть свойство target
, которое возвращает элемент, вызвавший данное событие. Пользуясь этим, мы можем каждый раз получать текущий элемент, в который только что ввели значение. После того, как мы ввели значение, нам нужно переключиться на следующий элемент. Для этого у элементов есть свойство nextElementSibling
, которое вернет следующий элемент, если он существует, либо null
, если нет. Чтобы перевести фокус, на элемент вызывается метод focus()
.
В дополнение, при обработке события ввода я бы использовал keypress
вместо keydown
, т.к. он не будет реагировать на спец клавиши вроде Shift
, при условии что вам нужно вводить заглавные Q
и E
. Вызов event.preventDefault()
необходим для того, чтобы в поле не попадал сам вводимый символ (Q
или E
), а оставались только значения 1
и -1
.
Итого:
addEventListener("keypress", function(event) {
event.preventDefault();
var currentInput = event.target;
if (event.keyCode == 90) {
currentInput.value = "1";
} else {
currentInput.value = "-1";
}
var nextInput = currentInput.nextElementSibling;
if (nextInput) {
nextInput.focus();
}
});
Поиграться с кодом можно здесь: http://jsbin.com/hitunoqexi/1/
Свойство nextElementSibling
и метод preventDefault()
могут не поддерживаться в старых версиях IE, тогда придется использовать полифилы.
Например вот так:
var pole_index = 0;
addEventListener("keydown", function(event) {
if (event.keyCode == 69) {
document.getElementById("pole" + pole_index).value = "-1"
pole_index++;
} else if (event.keyCode == 81) {
document.getElementById("pole" + pole_index).value = "1"
pole_index++;
}
});
<form action="0">
<input id="pole0" type="text" />
<input id="pole1" type="text" />
</form>
Проверку на лимит input`ов сделаете сами.
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
У меня есть много тегов input textпри фокусировки на n-ном input должна заиграть мелодия
У меня есть 3 текстовых поля, есть в корне звукНе получается реализовать следующее: если поле в фокусе, должен однократно воспроизвестись...
хочу сделать респонсивный слайдер с миниатюрамиНе могу сообразить как правильно сделать html-разметку для этого, чтобы миниатюры в зависимости...