[英]jQuery - on key up go to next input field
我目前正忙於13個輸入字段,其結果被合並為一個變量,我必須將其拆分為13個,因為我需要添加一個塊效果,如您在現實世界中的許多表格上所見。 每個塊的限制是一個,我需要找出一個距離,以便當您插入數字時,它會轉到下一個字段,直到所有字段都填滿,然后才會啟動驗證功能。
繼承人的HTML:
<div id="error"></div>
<form id="idCheck">
<input class="id" id="idnumber1" maxlength="1" />
<input class="id" id="idnumber2" maxlength="1" />
<input class="id" id="idnumber3" maxlength="1" />
<input class="id" id="idnumber4" maxlength="1" />
<input class="id" id="idnumber5" maxlength="1" />
<input class="id" id="idnumber6" maxlength="1" />
<input class="id" id="idnumber7" maxlength="1" />
<input class="id" id="idnumber8" maxlength="1" />
<input class="id" id="idnumber9" maxlength="1" />
<input class="id" id="idnumber10" maxlength="1" />
<input class="id" id="idnumber11" maxlength="1" />
<input class="id" id="idnumber12" maxlength="1" />
<input class="id" id="idnumber13" maxlength="1" /><span id="status"></span>
<p> <input type="submit" id="check" value="Check" /> </p>
</form>
<div id="result"> </div>
和繼承人的JavaScript:
function Validate() {
jQuery('#error p').remove();
var error = jQuery('#error');
var p1 = jQuery('#idnumber1').val();
var p2 = jQuery('#idnumber2').val();
var p3 = jQuery('#idnumber3').val();
var p4 = jQuery('#idnumber4').val();
var p5 = jQuery('#idnumber5').val();
var p6 = jQuery('#idnumber6').val();
var p7 = jQuery('#idnumber7').val();
var p8 = jQuery('#idnumber8').val();
var p9 = jQuery('#idnumber9').val();
var p10 = jQuery('#idnumber10').val();
var p11 = jQuery('#idnumber11').val();
var p12 = jQuery('#idnumber12').val();
var p13 = jQuery('#idnumber13').val();
var idNumber = p1 + p2 + p3 + p4 + p5 + p6 +p7 + p8 + p9 + p10 + p11 + p12 + p13;
};
任何幫助,不勝感激。
您可以使用keyup
和next
方法:
$('input.id').on('keyup', function(){
if (this.value.match(/\d+/)) {
var $this = $(this);
if ($this.next('input').length) {
$this.next().focus();
} else {
Validate()
}
}
})
function Validate() {
jQuery('#error p').remove();
var error = jQuery('#error');
var idNumber = $('input.id').map(function(){
return this.value
}).get().join('');
}
您可以嘗試以下方法:
$('#myInput').focus(function(){
$(this).next('input').focus();
})
要么
$("input").change(function() {
var inputs = $(this).closest('form').find(':input');
inputs.eq( inputs.index(this)+ 1 ).focus();
});
兩者都是從這里拿走的。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.