Как в цикле запросить у пользователя ввод данных и остановить выполнение JavaScript программы до нажатия enter? Prompt не предлагать

490

06 июня 2017, 02:02

Такая задача.
Есть блок div.
Нужен javaScript, который будет делать следующее:

В цикле вставлять input-ы в div по одному;
Вставив 1 input, программа ждёт ввода в него значения (можно пустое) и нажатия Enter (это как prompt, только без диалогового окна);
По нажатию Enter значение input-а сохраняется в переменную, выводится alert со значением;
Цикл повторяется (появляется следующий input).

Вот заготовка:

<div class="my_div">
  <!-- сюда будут вставляться input-ы -->
</div>

<script>
  for (var i = 0; i < 10; i++) {
  $(".my_div").append("<input type='text' id='field_for_answer' autofocus/>");
//  здесь программа останавливается, ждет ввода значения и нажатия Enter в input
  var yourAnswer = document.getElementById("field_for_answer").value;
  alert("Вы ввели: " + yourAnswer);
  }
  alert ("Цикл закончился!")
</script>

Второй день рыщу по сети в поисках решения. Я так понимаю, здесь в главном цикле должен быть ещё цикл :

while (пока не нажмёшь Enter ) {
  показывать input;
}

Кто-нибудь может помочь?

Answer 1

После долгих совещаний получайте рабочий пример, без циклов) Спасибо @Grundy за разъяснения

var append = function(i) { 
  $(".my_div").append("<input type='text' id='" + i + "' class='field_for_answer' autofocus/>"); 
}; 
var i = 1; 
append(i); 
$('.my_div').on('keyup', '.field_for_answer:last-child', function(e) { 
  if (e.which == 13 && i < 10) { 
    i++; 
    append(i); 
  } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class='my_div'></div>

Answer 2

Чем не устраивают модальные окна на html/css/js? Поставить такое окно, закрытие этого окна ТОЛЬКО если нажата кнопка ЭНТЕР и есть какой-то текст в инпуте, скрыть модальное окно. Сохранение и обработку данных из инпута модального окно - jquery