Заполнение полей input

342
15 декабря 2016, 16:32

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

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

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

Answer 2

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

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

READ ALSO
Воспроизведение звука в input

Воспроизведение звука в input

У меня есть много тегов input textпри фокусировки на n-ном input должна заиграть мелодия

308
Воспроизведение звука в input при фокусе

Воспроизведение звука в input при фокусе

У меня есть 3 текстовых поля, есть в корне звукНе получается реализовать следующее: если поле в фокусе, должен однократно воспроизвестись...

319
Работа с файлами js

Работа с файлами js

У меня 5 текстовых полей, в которых лежат некие значения

567
Респонсивная разметка для слайдера?

Респонсивная разметка для слайдера?

хочу сделать респонсивный слайдер с миниатюрамиНе могу сообразить как правильно сделать html-разметку для этого, чтобы миниатюры в зависимости...

289