按顺序填充文本框

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 else 4 else 5 中的数据。

Answer 1

Vanilla 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>

Answer 2

我认为最好的方法是：

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