按顺序填充文本框

Question

我有 5 个文本框（带有预填充数据）分别代表地址行 1,2,...5。要求是检查文本框 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

我认为最好的方法是：

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

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>

按顺序填充文本框

Fill textboxes sequentially

javascript

jquery

conditional

香草 JavaScript（jQuery 下面的解决方案）

jQuery 变体