Ввод поля формы один за другим

Question

Я создаю мастер форм, который ведет пользователя через каждый элемент формы, показывая подсказку, описывающую каждый элемент.Я пытаюсь сделать следующее:

• Оставить все поля формы отключенными, за исключением поля формы, которое пользователь в настоящее время заполняет.
• Когда пользователь хочет перейти к следующему полюим нужно нажать на всплывающую подсказку для поля, в котором они находятся в данный момент.Кроме того, поле должно быть непустым для продвижения.

У меня всплывающая подсказка отображается правильно, и она исчезает при нажатии.Я не могу понять, как сказать в коде JavaScript: «Пользователь ввел данные в текущее поле и нажал на всплывающую подсказку, чтобы перейти? Хорошо, затем перейдите к следующему полю, пока мы не достигнем кнопки отправки.В противном случае оставайтесь здесь в текущем поле. "

Вот мой код:

function prepareForm() {
  var inputs = document.getElementsByTagName("input");
  for (var i = 0; i < inputs.length; i++){
      if (i !== 0){
          inputs[i].disabled = "disabled";
      }
      // Make sure the tooltip tag is present...
      if (inputs[i].parentNode.getElementsByTagName("span")[0]) {
          inputs[i].onfocus = function () {
              this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
          }

          // When the user has entered information and clicked the tooltip, continue onto the next field.
          inputs[i].parentNode.getElementsByTagName("span")[0].onclick = function () {
              this.parentNode.getElementsByTagName("span")[0].style.display = "none";
          }
      }
  }
}
window.onload = prepareForm;  

Я пытался ввести другую логику в функцию onclick, но потому что она выполняется в любое времяУ меня нет доступа к массиву входов.Любая помощь в том, как я могу это сделать, будет очень признательна.Спасибо!

Answer 1

Поскольку вы сказали, что вам удобно с jQuery, я создал эту скрипку для вас. Поскольку я не знаю, как вы показываете подсказку, дайте мне знать, если вы не тот, кто у меня есть Использование. Этот пример может помочь вам начать и добавить свои собственные требования.

Answer 2

Я бы не рекомендую это. Вы изменяете стандартное поведение форм ... без особого преимущества для конечного пользователя.

Кроме того, вы заставляете пользователей выполнять дополнительную работу между полями, щелкая элементы поля неформ.

Это не помогает простоте использования и только запутает пользователей. На заметку, если вы еще не прочитали « Не заставляйте меня думать » Стива Круга, пожалуйста, проверьте это как можно скорее - в нем полно подробностей о том, почему «изобретать» новые концепции пользовательского интерфейса часто являются плохой идеей.

Обновление: Так что я думаю, что это будет справедливо, если я предоставлю другую рекомендацию, основанную на том, что информация, представленная об этой форме, является в значительной степени ручным упражнением.

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

В результате я представляю форму, в которой есть кнопка «Предыдущий / следующий» внизу каждого шага (где это применимо ... например, шаг 1 не будет иметь предыдущего). Кнопка «Далее» будет отключена и активируется только тогда, когда пользователь введет данные в поле на этой странице. Когда отображается каждый шаг, фокус должен быть автоматически помещен в поле для ускорения ввода.

Если возможно, можно добавить индикатор выполнения или индикатор% завершения, чтобы пользователь лучше понимал, сколько осталось шагов.

Плюсы / минусы этого подхода.

Плюсы:

• Пользователю не нужно никуда щелкать, чтобы разрешить действительный переход к следующему полю
• Никакие поля не отключены, что может привести к путанице среди пользователей (кроме ожидаемой следующей кнопки).
• Пользователь может сосредоточиться на одном поле, которое имеет значение в данный момент (например, номер телефона), и есть много места для инструкций / помощи
• Если на шаге 1 запрашивается слово «Пол», а пользователь выбирает «Мужчина», тогда на шаге 6, который спрашивает, беременна ли пользователь когда-либо, можно пропустить / ответить автоматически
• Если пользователь хочет вернуться, он может
• Пользователь не может «случайно» перейти к следующему полю, не заполнив предыдущее поле
• Пользователь будет знаком с этим стилем / поведением мастера, это довольно типично для многих мастеров / установщиков

Минусы:

• Пользователь не может видеть все вопросы сразу
• Пользователь не может вводить значения полей не по порядку
• Пользователь не может просто переходить от поля к полю, поэтому общая форма будет более медленной для опытных пользователей по сравнению с одной формой