javascript - 表单字段依次输入

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 很满意，我创建了 this fiddle对于您来说。由于我不知道您如何显示工具提示，请告诉我我的工具提示是否不是您正在使用的。此示例可以帮助您开始并添加您自己的要求。