表單字段輸入一個接一個

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 function 中輸入其他邏輯，但由於它隨時執行，我無法訪問輸入數組。 任何關於我如何實現這一點的幫助將不勝感激。 謝謝！

Answer 1

正如你所說，你對 jQuery 感到滿意，我為你創建了這個小提琴。因為我不知道你是如何顯示工具提示的，如果我的不是你正在使用的，請告訴我。這個例子可以幫助你開始和添加您自己的要求。

Answer 2

我不會推薦這個。 您正在更改 forms 的默認行為......對最終用戶幾乎沒有好處。

此外，您還強制用戶在單擊非表單字段元素的字段之間進行額外的工作。

這使基本可用性失敗，只會使用戶感到困惑。 附帶說明一下，如果你還沒有讀過 Steve Krug 的“ Don't Make Me Think ”，請盡早查看——它充滿了關於為什么“發明”新的 UI 概念通常是一個令人大開眼界的細節。餿主意。

更新：所以我認為唯一公平的是，我根據提供的有關此表格的信息提供不同的建議，該表格非常適合手持練習。

因此，基於逐個字段控制輸入的需要，我認為以可用的方式這樣做的唯一方法是將其作為向導提供，每頁一個字段。 這樣做還有一些額外的好處，因為如果在早期步驟中做出決定不需要未來步驟，則可以完全省略它。

因此，我設想了一個表單，其中每個步驟的底部都有一個“上一個/下一個”按鈕（如果適用……例如，第 1 步將沒有上一個）。 Next 按鈕將開始禁用，並且僅在用戶將輸入輸入該頁面上的字段時才啟用。 顯示每個步驟時，應自動將焦點放在該字段中，以便更快地進入。

如果可能，可以添加進度條或完成百分比指示器，讓用戶更好地了解剩余的步驟數。

這種方法的優點/缺點。

優點：

• 用戶無需單擊任何位置即可有效轉換到下一個字段
• 沒有字段被禁用導致用戶混淆（除了預期的下一步按鈕）
• 用戶可以專注於當時重要的一個領域（例如電話號碼），並且有足夠的空間進行說明/幫助
• 如果步驟 1 要求說出“性別”並且用戶選擇“男性”，則可以跳過/自動回答詢問用戶是否懷孕的步驟 6
• 如果用戶想要 go 回來他們可以
• 用戶在不填寫前一個字段的情況下不能“意外”進入下一個字段
• 用戶將熟悉向導的這種風格/行為，這是許多向導/安裝程序相當典型的

缺點：

• 用戶無法一次查看所有問題
• 用戶不能亂序輸入字段值
• 用戶不能簡單地從一個字段切換到另一個字段，因此高級用戶的整體表單與單個表單相比會更慢