1

У меня 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>

В интернете уже искал, есть только частные случаи. Но решения так и не смог добиться. Просьба не закидывать меня ссылками - мол, читай - я уже все прошарил.

1
  • А вы в курсе, что keyCode 90 - это латинская заглавная Z? 13 июн 2015 в 11:12

2 ответа 2

1

У объекта события 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, тогда придется использовать полифилы.

0

Например вот так:

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`ов сделаете сами.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.