Question

我有5个文本字段，如何控制用户在文本字段中输入数据。

表示如果TextField1为空，用户无法在textfield2中输入数据

如果TextField1和TextField2为空，则用户无法在textfield3中输入数据

如果TextField3和TextField4为空，则用户无法在textfield4中输入数据

如果TextField4和TextField3为空，则用户无法在textfield5中输入数据

<div data-role="fieldcontain">

<label for="name">T1 Category:</label>
    <input type="text" name="name" id="t1cat" value=""  onkeypress="return nospecialCharacters(event)"   placeholder="T1" /> </br>

<label for="name">T2 Category:</label>
<input type="text" name="name" id="t2cat" value=""  onkeypress="return nospecialCharacters(event)"   placeholder="T2" /> </br>

<label for="name">T3 Category:</label>
<input type="text" name="name" id="t3cat" value="" onkeypress="return nospecialCharacters(event)"   placeholder="T3" /> </br>

<label for="name">T4 Category:</label>
<input type="text" name="name" id="t4cat" value="" onkeypress="return nospecialCharacters(event)"   placeholder="T4" /> </br>

<label for="name">T5 Category:</label>
<input type="text" name="name" id="t5cat" value="" onkeypress="return nospecialCharacters(event)"   placeholder="T5" /> </br>

<input type="button" class= "btn blue" value="Request For This Category" id="requestcatbtn"> </br>

</div>

http://jsfiddle.net/2jfmzsdf/

我只需要你对如何完成这一点的想法。（我不想为确切答案而烦恼）

Answer 1

如何使用jQuery的.prev()方法查找之前的<input />元素？

.prev()采用过滤器（documentation），所以我认为你不仅可以问它前面的元素（可能是<label>），而且特别是前面的{{1}元素。

使用<input />（documentation），您也可以使用原生JavaScript轻松实现相同目标。

一旦你拥有了前一个.previousSibling()，检查它的值是否具有非零长度将是相当简单的。

Answer 2

首先不要使用'br'元素，而是使用CSS。这是一个有效的Fiddle

HTML：

<ul data-role="fieldcontain">
  <li>
    <label for="name">T1 Category:</label>
    <input type="text" class="inputFields" name="name" id="t1cat" value="" placeholder="T1" />
  </li>
  <li>
    <label for="name">T2 Category:</label>
    <input type="text" class="inputFields" disabled="disabled" name="name" id="t2cat" value="" placeholder="T2" />
  </li>
  <li>
    <label for="name">T3 Category:</label>
    <input type="text" class="inputFields" disabled="disabled" name="name" id="t3cat" value="" placeholder="T3" />
  </li>
  <li>
    <label for="name">T4 Category:</label>
    <input type="text" class="inputFields" disabled="disabled" name="name" id="t4cat" value="" placeholder="T4" />
  </li>
  <li>
    <label for="name">T5 Category:</label>
    <input type="text" class="inputFields" disabled="disabled" name="name" id="t5cat" value="" placeholder="T5" />
  </li>
  <li>
    <input type="button" class="btn blue" value="Request For This Category" id="requestcatbtn" />
  </li>
</ul>

正如您所看到的，我使用了一个列表来更轻松地进行样式设置和更好的概述。此外，我给每个输入一个类和一个禁用属性（除了第一个）。

CSS：

li {
  display: block;
}

JS：

$('.inputFields').blur(function () {
  if ($(this).val() != '') {
    $(this).parent().next().find('input').attr('disabled', false);
  } else {
    $(this).parent().next().find('input').attr('disabled', 'disabled');
  }
});

基本上这个js正在检查你是否聚焦/聚焦输入字段。如果它的值不为空，则从下一个输入中删除disabled属性，反之亦然。

希望这会有所帮助。您可以调整JS内部的逻辑。这只是一个例子。如果你想要填充所有以前的元素，你可以简单地将它添加到你的js ..

Answer 3

您的解决方案可以是：DEMO

$('input.txtBox').on('keyup', function(){
    var next = $(this).next('input.txtBox');
    if (next.length) {
        if ($.trim($(this).val()) != '') next.removeAttr('disabled');
        else {
            var nextAll = $(this).nextAll('input.txtBox');
            nextAll.attr('disabled', 'disabled');
            nextAll.val('');
        }
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
    <input  type="text" class="txtBox" required="required" placeholder="T1"/>
    <input  type="text" class="txtBox" disabled="disabled" placeholder="T2" />
    <input  type="text" class="txtBox" disabled="disabled" placeholder="T3" />
    <input  type="text" class="txtBox" disabled="disabled" placeholder="T4" />
    <input  type="text" class="txtBox" disabled="disabled" placeholder="T5" />
    <input type="submit" />
</form>

如果文本字段的前任为空，我如何控制文本字段中的填充数据

3 个答案: