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。因为我不知道你是如何展示工具提示的，请告诉我，如果我的不是你正在使用的那个。这个示例可以帮助您启动并添加自己的要求。

Answer 2

我不推荐这个。您正在更改表单的默认行为......对最终用户几乎没有任何好处。

此外，您强制用户在单击非表单字段元素的字段之间执行其他工作。

这使基本的可用性失效，只会让用户感到困惑。另外，如果你还没有读过Steve Krug的“Don't Make Me Think”，请在方便的时候查看它 - 它充满了眼睛开放的细节，为什么“发明”新的UI概念通常是坏的想法。

更新：所以我认为根据所提供的有关此表单的信息提供不同的建议是非常公平的。

因此，基于 need 来逐字段地控制输入，我认为以可用的方式这样做的唯一方法是将其作为向导提供，每页一个字段。这有一些额外的好处，因为如果在早期步骤中作出决定，否定对未来步骤的需要，则可以完全省略。

因此，我设想了一个表格，其中每个步骤的底部都有一个上一个/下一个按钮（如果适用，例如步骤1将没有前一个）。 “下一步”按钮将启动禁用，仅在用户将输入放入该页面的字段时才启用。当显示每个步骤时，焦点应自动放入字段以便更快地进入。

如果可能，可以添加进度条或％完成指示符，以便用户更好地了解剩余的步数。

这种方法的优点/缺点。

优点：

用户无需点击任何位置即可启用到下一个字段的有效转换
禁用任何字段导致用户混淆（除了预期的“下一步”按钮）
用户可以专注于当时重要的一个字段（例如电话号码），并且有充足的指示/帮助空间
如果步骤1要求说“性别”并且用户选择“男性”，那么询问用户是否怀孕的步骤6可以跳过/自动回答
如果用户想要返回，则可以
如果不填写上一个字段，用户不能“意外”到达下一个字段
用户将熟悉这种向导的样式/行为，这是许多向导/安装程序的典型特征

缺点：

用户无法立即查看所有问题
用户无法无序输入字段值
用户不能简单地从一个字段到另一个字段进行选项卡，因此高级用户与单个表单的整体形式会更慢

形式字段输入一个接一个

2 个答案:

这种方法的优点/缺点。