我试图开发一个指定为14位数的数字字段范围。我跌跌撞撞地跳到下一个输入字段(像一个密码系统)
<div class="input-group single-digits GTIN">
<input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
<span class="input-group-glue"></span>
<input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
<span class="input-group-glue"></span>
<input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
<span class="input-group-glue"></span>
<input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
<span class="input-group-glue"></span>
<input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
<span class="input-group-glue"></span>
<input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
<span class="input-group-glue"></span>
<input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
<span class="input-group-glue"></span>
<input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
<span class="input-group-glue"></span>
<input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
<span class="input-group-glue"></span>
<input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
<span class="input-group-glue"></span>
<input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
<span class="input-group-glue"></span>
<input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
<span class="input-group-glue"></span>
<input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
<span class="input-group-glue"></span>
<input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
<span class="input-group-glue"></span>
<input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
<span class="input-group-glue"></span>
<div class="input-group-btn">
<button type="button" id="generate-ean-from-list" class="btn btn-default" data-action="assign-result-ean">
<span class="fa fa-dice font-size-16" aria-hidden="true"></span>
</button>
<button rel="tooltip" class="btn btn-default" data-toggle="tooltip" data-trigger="hover" data-placement="left" title="Global Trade Item Number, an unique 14 digit number, that can be applied to all products. More info at GS1">
<span class="fa fa-question-circle font-size-16" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default lock-field" data-action="lock-field" data-fieldname="GTIN" data-status="unlocked">
<span class="fa fa-unlock font-size-16" aria-hidden="true"></span>
</button>
</div>
</div>
它的javascript如下(运行在jquery上)
$('body').on('input', '.single-digit', function(){
if($(this).val().length==$(this).attr("maxlength")){
$(this).next('.single-digit').focus();
}
});
但由于某种原因,我不能弄清楚,我不能让它工作,我知道它进入了if
语句,但似乎还没有找到下一个.single-digit
类并使其跳转到它。这与组中的跨距有关吗?我想我可以,因为它都是彼此的兄弟姐妹,所以可以跳到下一个.single-digit
类。
一个JSfiddle到这里来看看问题。https://jsfiddle.net/Ltdqgp40/1/
1条答案
按热度按时间tcbh2hod1#
问题是
next(selector)
的工作方式与您预期的不同,但它仍按设计工作。将选择下一个元素 * 如果 * 它匹配提供的选择器,这-因为
<span>
是下一个元素-它显然不能。相反,您可以用途:
具体如下:
JS Fiddle demo。
值得注意的是,上面的内容在纯JavaScript中是完全可能的:
参考文献:
JavaScript:
Array.prototype.filter()
。Array.prototype.findIndex()
。Array.prototype.slice()
。document.querySelector()
。document.querySelectorAll()
。Element.children
。Element.matches()
。Element.querySelector()
。Element.querySelectorAll()
。EventTarget.addEventListener()
。Node.parentNode
。String.prototype.trim()
. jQuery:first()
。next()
。nextAll()
。