У меня 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`ов сделаете сами.
Продвижение своими сайтами как стратегия роста и независимости