逐个填写文本框

Question

我有5个文本框（已预填数据），分别代表地址行1,2,...5。要求检查TEXTBOX 1是否为空，如果是，则将数据从文本框2移动到文本框1，将文本框3移动到文本框2，以此类推，以确保连续的文本框之间没有空文本框。我该如何在Jquery中实现？如果所有文本框都为空，我会显示必填字段错误。

这里我只是试图将数据保存在一个变量中。

 custData.CustAddr1 = $("#txtCustAddr1" + value).val().trim() == "" ? $("#txtCustAddr2" + value).val() : $("#txtCustAddr1" + value).val();

在上述代码中，我需要检查所有5个文本框。如果txtbox1为空，则使用文本框2的数据，否则从3、4、5中选择。

- Arpita Dutta

---

你的代码在哪里？ - Mayank Pandeyz

代码呢？ - tholo

在我看来，这个问题中的代码并不需要，它只是一个算法问题而已。 - dfsq

嗯，确切地说就是 @dfsq - Arpita Dutta

Answer 1

我认为最好的方法是：

• 将所有非空文本框的值作为JS数组获取
• 如果该数组为空，则显示错误
• 否则，清空文本框的值
• 然后按正确的顺序使用数组值填充文本框

- Mik

---

这可能是可以的，或者你可以检查txtbox[index]是否为空，然后移动到txtbox[index+1]并循环索引。这样，您就可以在不更改代码的情况下改变文本框的数量。 - freedomn-m

当然可以，但你需要循环O(n²)。如果前两个文本框为空，则会在#1中放置一个空值。你需要再次循环从0到<4，然后从0到<3等。 - Mik

此外，使用上述算法时，您将不需要硬编码文本框数量。 - Mik

我认为这是最简单的解决方案。但循环解决方案可能更有趣和棘手。 - dfsq

这种方法会使用大量内存来复制所有文本框的值，并在填充的文本框之间没有空文本框时不必要地更新所有文本框的值。它还会两次循环遍历所有文本框，而一次循环就足够了。当然，在只有5个文本框的情况下，这些评论实际上并不是问题。无论如何，我提供了一个解决这些问题的答案。 - Just a student

针对评论进行回复：当只有少量文本框时，O(n2)并不会产生影响。您关于需要处理两个连续的空输入是正确的，但仍然只需要一个循环。如果有大量/内容很多，则加载所有内容的内存影响将超过时间处理。您不需要硬编码最大值，因为它将是 $(".textbox").length。 - freedomn-m

Answer 2

使用原生JavaScript（以下为jQuery解决方案）

这是一种不使用jQuery的解决方案。它使用线性时间，且不在不需要更新文本框值时更新，因此经常调用也没有问题。

高层次上的思路是跟踪第一个空文本框，并在遍历所有文本框时将文本框值移动到该空文本框。

如果在此函数结束时，第一个空文本框仍然是第一个（在下面的演示代码中为firstEmpty === 0），则可以显示错误信息。

function enforceSequential(selector) {
  var firstEmpty = -1, current = -1,
      textboxes = document.querySelectorAll(selector);
  for (let textbox of textboxes) {
    current++;
    if (textbox.value === '') {
      if (firstEmpty < 0) {
        firstEmpty = current;
      }
    } else if (firstEmpty >= 0) {
      textboxes[firstEmpty].value = textbox.value;
      textbox.value = '';
      firstEmpty++;
    }
  }
}

document.getElementById('run').addEventListener('click', () => enforceSequential('.box'));

input {
  display: block;
  margin: 0 0 1em 0;
}

<input type="text" class="box" value="foo" />
<input type="text" class="box" value="" />
<input type="text" class="box" value="bar" />
<input type="text" class="box" value="" />
<input type="text" class="box" value="" />
<input type="text" class="box" value="baz" />
<button id="run">Run script</button>

jQuery变体

当然，如果您想使用jQuery，可以这样做。

function enforceSequential(selector) {
  var firstEmpty = -1,
      textboxes = $(selector);
  textboxes.each((current, textbox) => {
    textbox = $(textbox);
    if (textbox.val() === '') {
      if (firstEmpty < 0) {
        firstEmpty = current;
      }
    } else if (firstEmpty >= 0) {
      textboxes.eq(firstEmpty).val(textbox.val());
      textbox.val('');
      firstEmpty++;
    }
  });
}

$('#run').on('click', () => enforceSequential('.box'));

input {
  display: block;
  margin: 0 0 1em 0;
}

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

<input type="text" class="box" value="foo" />
<input type="text" class="box" value="" />
<input type="text" class="box" value="bar" />
<input type="text" class="box" value="" />
<input type="text" class="box" value="" />
<input type="text" class="box" value="baz" />
<button id="run">Run script</button>

- Just a student

---

非常好的解决方案。 - dfsq