当达到MaxLength时，使用Jquery循环遍历输入字段

时间：2016-03-04 04:02:06

标签： jquery html

我已经找到了几个建议的解决方案，但由于我的所有输入都嵌套在div标签内，因此似乎没有一个适用于我的情况。下面是一个示例行。我在数据输入表单上有几行。当maxlength为7输入到任何输入时，我希望前进到下一个输入字段。用户将输入xxx.xxx，其中x是任何或所有输入字段中的任意数字。我试图这样做，所以他们不必离开数字小键盘。任何帮助，将不胜感激。

这是我的尝试jsfiddle 

<div class="form-group row">
   <div class="col-md-2 text-center">
      <span><label class="control-label">2.5</label></span>
      <input data-val="true" data-val-number="The field CouponTypeID must be a number." data-val-required="The CouponTypeID field is required." id="DailyTradeData_Coupons_0__CouponTypeID" name="DailyTradeData.Coupons[0].CouponTypeID" type="hidden" value="4">
   </div>
   <div class="col-md-3 border-div col-main">
      <div class="row">
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field OpenAmount must be a number." id="DailyTradeData_Coupons_0__CouponValues_0__OpenAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[0].OpenAmount" type="text" value="">
         </div>
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field Close Amount must be a number." id="DailyTradeData_Coupons_0__CouponValues_0__CloseAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[0].CloseAmount" type="text" value="">
         </div>
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field HighAmount must be a number." id="DailyTradeData_Coupons_0__CouponValues_0__HighAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[0].HighAmount" type="text" value="">
         </div>
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field LowAmount must be a number." id="DailyTradeData_Coupons_0__CouponValues_0__LowAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[0].LowAmount" type="text" value="">
         </div>
      </div>
      <input data-val="true" data-val-number="The field SettlementMonthID must be a number." data-val-required="The SettlementMonthID field is required." id="DailyTradeData_Coupons_0__CouponValues_0__SettlementMonthID" name="DailyTradeData.Coupons[0].CouponValues[0].SettlementMonthID" type="hidden" value="67">
   </div>
   <div class="col-md-3 border-div col-main">
      <div class="row">
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field OpenAmount must be a number." id="DailyTradeData_Coupons_0__CouponValues_1__OpenAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[1].OpenAmount" type="text" value="">
         </div>
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field Close Amount must be a number." id="DailyTradeData_Coupons_0__CouponValues_1__CloseAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[1].CloseAmount" type="text" value="">
         </div>
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field HighAmount must be a number." id="DailyTradeData_Coupons_0__CouponValues_1__HighAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[1].HighAmount" type="text" value="">
         </div>
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field LowAmount must be a number." id="DailyTradeData_Coupons_0__CouponValues_1__LowAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[1].LowAmount" type="text" value="">
         </div>
      </div>
      <input data-val="true" data-val-number="The field SettlementMonthID must be a number." data-val-required="The SettlementMonthID field is required." id="DailyTradeData_Coupons_0__CouponValues_1__SettlementMonthID" name="DailyTradeData.Coupons[0].CouponValues[1].SettlementMonthID" type="hidden" value="68">
   </div>
   <div class="col-md-3 border-div col-main">
      <div class="row">
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field OpenAmount must be a number." id="DailyTradeData_Coupons_0__CouponValues_2__OpenAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[2].OpenAmount" type="text" value="">
         </div>
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field Close Amount must be a number." id="DailyTradeData_Coupons_0__CouponValues_2__CloseAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[2].CloseAmount" type="text" value="">
         </div>
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field HighAmount must be a number." id="DailyTradeData_Coupons_0__CouponValues_2__HighAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[2].HighAmount" type="text" value="">
         </div>
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field LowAmount must be a number." id="DailyTradeData_Coupons_0__CouponValues_2__LowAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[2].LowAmount" type="text" value="">
         </div>
      </div>
      <input data-val="true" data-val-number="The field SettlementMonthID must be a number." data-val-required="The SettlementMonthID field is required." id="DailyTradeData_Coupons_0__CouponValues_2__SettlementMonthID" name="DailyTradeData.Coupons[0].CouponValues[2].SettlementMonthID" type="hidden" value="69">
   </div>
</div>

2 个答案:

答案 0 :(得分：2)

使用$('input')时，您在表单中隐藏了输入。您需要选择所有非隐藏输入$('input').not(':hidden')，如果您的表单具有文本以外的输入类型（收音机，复选框等），那么您的选择应为$('input[type="text"]')（这也适用于当前情况）。

此外，当元素+ 1的索引达到输入的长度时，将下一个元素索引设置为0以保持循环：

((inputs.index($(this)) + 1) == inputs.length) ? 0 : inputs.index($(this)) + 1;

段：

＆＃13;
＆＃13; 
var inputs = $('input').not(':hidden').on('keydown', function(event){
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if(keycode == 13){
        //Enter
      
        var next  = ((inputs.index($(this)) + 1) == inputs.length) ? 0 : inputs.index($(this)) + 1;
        inputs.eq(next).focus();
    }
    
    //event.preventDefault();
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group row">
   <div class="col-md-2 text-center">
      <span><label class="control-label">2.5</label></span>
      <input data-val="true" data-val-number="The field CouponTypeID must be a number." data-val-required="The CouponTypeID field is required." id="DailyTradeData_Coupons_0__CouponTypeID" name="DailyTradeData.Coupons[0].CouponTypeID" type="hidden" value="4">
   </div>
   <div class="col-md-3 border-div col-main">
      <div class="row">
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field OpenAmount must be a number." id="DailyTradeData_Coupons_0__CouponValues_0__OpenAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[0].OpenAmount" type="text" value="">
         </div>
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field Close Amount must be a number." id="DailyTradeData_Coupons_0__CouponValues_0__CloseAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[0].CloseAmount" type="text" value="">
         </div>
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field HighAmount must be a number." id="DailyTradeData_Coupons_0__CouponValues_0__HighAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[0].HighAmount" type="text" value="">
         </div>
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field LowAmount must be a number." id="DailyTradeData_Coupons_0__CouponValues_0__LowAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[0].LowAmount" type="text" value="">
         </div>
      </div>
      <input data-val="true" data-val-number="The field SettlementMonthID must be a number." data-val-required="The SettlementMonthID field is required." id="DailyTradeData_Coupons_0__CouponValues_0__SettlementMonthID" name="DailyTradeData.Coupons[0].CouponValues[0].SettlementMonthID" type="hidden" value="67">
   </div>
   <div class="col-md-3 border-div col-main">
      <div class="row">
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field OpenAmount must be a number." id="DailyTradeData_Coupons_0__CouponValues_1__OpenAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[1].OpenAmount" type="text" value="">
         </div>
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field Close Amount must be a number." id="DailyTradeData_Coupons_0__CouponValues_1__CloseAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[1].CloseAmount" type="text" value="">
         </div>
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field HighAmount must be a number." id="DailyTradeData_Coupons_0__CouponValues_1__HighAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[1].HighAmount" type="text" value="">
         </div>
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field LowAmount must be a number." id="DailyTradeData_Coupons_0__CouponValues_1__LowAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[1].LowAmount" type="text" value="">
         </div>
      </div>
      <input data-val="true" data-val-number="The field SettlementMonthID must be a number." data-val-required="The SettlementMonthID field is required." id="DailyTradeData_Coupons_0__CouponValues_1__SettlementMonthID" name="DailyTradeData.Coupons[0].CouponValues[1].SettlementMonthID" type="hidden" value="68">
   </div>
   <div class="col-md-3 border-div col-main">
      <div class="row">
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field OpenAmount must be a number." id="DailyTradeData_Coupons_0__CouponValues_2__OpenAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[2].OpenAmount" type="text" value="">
         </div>
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field Close Amount must be a number." id="DailyTradeData_Coupons_0__CouponValues_2__CloseAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[2].CloseAmount" type="text" value="">
         </div>
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field HighAmount must be a number." id="DailyTradeData_Coupons_0__CouponValues_2__HighAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[2].HighAmount" type="text" value="">
         </div>
         <div class="col-md-3 col-values">
            <input class="form-control text-box single-line" data-val="true" data-val-number="The field LowAmount must be a number." id="DailyTradeData_Coupons_0__CouponValues_2__LowAmount" maxlength="7" name="DailyTradeData.Coupons[0].CouponValues[2].LowAmount" type="text" value="">
         </div>
      </div>
      <input data-val="true" data-val-number="The field SettlementMonthID must be a number." data-val-required="The SettlementMonthID field is required." id="DailyTradeData_Coupons_0__CouponValues_2__SettlementMonthID" name="DailyTradeData.Coupons[0].CouponValues[2].SettlementMonthID" type="hidden" value="69">
   </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

获取输入文本框的总长度，并使用index检查它是否是最后一个文本框，然后将焦点放在第一个文本框中。

＆＃13;
＆＃13; 
$(document).ready(function(e) {
	var inputs = $('input').on('keydown', function(event){
		var total = inputs.length;
		var inds = inputs.index(this);;
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if(keycode == 13){
        //Enter
		if(inds < total-1){
        inputs.eq(inputs.index(this) + 1).focus();
		}
		else if(inds == total-1){
		 inputs.eq(total - inputs.index(this) -1).focus();
		}
    } 
    
    event.preventDefault();
});
});
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
<div class="row" style="padding-bottom: 3px">
    <div class="col-xs-1" style="padding-right: 2px; padding-left: 0px">1</div>
     <div class="clearfix"></div>
    <div class="col-xs-2" style="padding-right: 2px; padding-left: 1px">
        <input type="text" class="form-control text-center" maxlength="4" name="a[]">
    </div>
    <div class="clearfix"></div>
    <div class="col-xs-2" style="padding-right: 2px; padding-left: 1px">
        <input type="text" class="form-control text-center" maxlength="5" name="b[]">
    </div>
     <div class="clearfix"></div>
    <div class="col-xs-2" style="padding-right: 2px; padding-left: 1px">
        <input type="text" class="form-control text-center" maxlength="5" name="c[]">
    </div>
</div>
<div class="row" style="padding-bottom: 3px">
    <div class="col-xs-1" style="padding-right: 2px; padding-left: 0px">2</div>
     <div class="clearfix"></div>
    <div class="col-xs-2" style="padding-right: 2px; padding-left: 1px">
        <input type="text" class="form-control text-center" maxlength="4" name="a[]">
    </div>
     <div class="clearfix"></div>
    <div class="col-xs-2" style="padding-right: 2px; padding-left: 1px">
        <input type="text" class="form-control text-center" maxlength="5" name="b[]">
    </div>
     <div class="clearfix"></div>
    <div class="col-xs-2" style="padding-right: 2px; padding-left: 1px">
        <input type="text" class="form-control text-center" maxlength="5" name="c[]">
    </div>
</div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题