Как сделать переход к следующему полю при заполнении предыдущего?

Question

[pw0ned]

есть такие вот формы



как сделать чтобы после заполнения поля которое не выделено цветом например номер один, переходило к следующему полю номер 5 и так далее?
в голубых полях цветных установлено значение disabled, они не должны заполняться

буду благодарен за ответы!

Comments

[xmoonlight]

Покажите код.

[pw0ned]

xmoonlight,

<div class="pass" style="    display: inline-block; line-height: 2"> 

<input type="text" style="width: 25px; padding: 10px 0px 10px 0px; height: 25px; text-align: center; display: inline; border-radius: 0px;" maxlength="1" placeholder="1">
<input type="text" style="width: 25px; padding: 10px 0px 10px 0px; background: #b7ebf1; border: 1px solid #b7ebf1; height: 25px; text-align: center; display: inline; border-radius: 0px;" disabled="" placeholder="2">
<input type="text" style="width: 25px; padding: 10px 0px 10px 0px; background: #b7ebf1; border: 1px solid #b7ebf1; height: 25px; text-align: center; display: inline; border-radius: 0px;" disabled="" placeholder="3">
<input type="text" style="width: 25px; padding: 10px 0px 10px 0px; background: #b7ebf1; border: 1px solid #b7ebf1; height: 25px; text-align: center; display: inline; border-radius: 0px;" disabled="" placeholder="4">
<input type="text" style="width: 25px; padding: 10px 0px 10px 0px; height: 25px; text-align: center; display: inline; border-radius: 0px;" maxlength="1" placeholder="5">
<input type="text" style="width: 25px; padding: 10px 0px 10px 0px; height: 25px; text-align: center; display: inline; border-radius: 0px;" maxlength="1" placeholder="6">
<input type="text" style="width: 25px; padding: 10px 0px 10px 0px; background: #b7ebf1; border: 1px solid #b7ebf1; height: 25px; text-align: center; display: inline; border-radius: 0px;" disabled="" placeholder="7">
<input type="text" style="width: 25px; padding: 10px 0px 10px 0px; height: 25px; text-align: center; display: inline; border-radius: 0px;" maxlength="1" placeholder="8">
<input type="text" style="width: 25px; padding: 10px 0px 10px 0px; height: 25px; text-align: center; display: inline; border-radius: 0px;" maxlength="1" placeholder="9">
<input type="text" style="width: 25px; padding: 10px 0px 10px 0px; height: 25px; text-align: center; display: inline; border-radius: 0px;" maxlength="1" placeholder="10">

<input type="text" style="width: 25px; padding: 10px 0px 10px 0px; height: 25px; text-align: center; display: inline; border-radius: 0px;" maxlength="1" placeholder="11">
<input type="text" style="width: 25px; padding: 10px 0px 10px 0px; height: 25px; text-align: center; display: inline; border-radius: 0px;" maxlength="1" placeholder="12">
<input type="text" style="width: 25px; padding: 10px 0px 10px 0px; background: #b7ebf1; border: 1px solid #b7ebf1; height: 25px; text-align: center; display: inline; border-radius: 0px;" disabled="" placeholder="13">
<input type="text" style="width: 25px; padding: 10px 0px 10px 0px; height: 25px; text-align: center; display: inline; border-radius: 0px;" maxlength="1" placeholder="14">
<input type="text" style="width: 25px; padding: 10px 0px 10px 0px; background: #b7ebf1; border: 1px solid #b7ebf1; height: 25px; text-align: center; display: inline; border-radius: 0px;" disabled="" placeholder="15">
<input type="text" style="width: 25px; padding: 10px 0px 10px 0px; background: #b7ebf1; border: 1px solid #b7ebf1; height: 25px; text-align: center; display: inline; border-radius: 0px;" disabled="" placeholder="16">
<input type="text" style="width: 25px; padding: 10px 0px 10px 0px; height: 25px; text-align: center; display: inline; border-radius: 0px;" maxlength="1" placeholder="17">
<input type="text" style="width: 25px; padding: 10px 0px 10px 0px; background: #b7ebf1; border: 1px solid #b7ebf1; height: 25px; text-align: center; display: inline; border-radius: 0px;" disabled="" placeholder="18">
<input type="text" style="width: 25px; padding: 10px 0px 10px 0px; background: #b7ebf1; border: 1px solid #b7ebf1; height: 25px; text-align: center; display: inline; border-radius: 0px;" disabled="" placeholder="19">
<input type="text" style="width: 25px; padding: 10px 0px 10px 0px; background: #b7ebf1; border: 1px solid #b7ebf1; height: 25px; text-align: center; display: inline; border-radius: 0px;" disabled="" placeholder="20">


</div>

[xmoonlight]

pw0ned, Круто!
Нет, JS-код, который Вы пробовали написать и ничего не сработало.

[pw0ned]

xmoonlight,

function nextJump1(x) {
	if (x.value.length == 1) {
		x.value = "";
		do {
			x = x.nextSibling;
		}
		while (x && !(/text/.test(x.type)));
		if (x && /text/.test(x.type)) {
			
			$(x).select();
		}
	}
}

onkeyup="nextJump1(this);"

Но в этом случае затрагивает только идующие один за другим поля где не присутствует disabled, к примеру с 1 на 5 не перескакивает...

Answer 1

[xmoonlight]

do {
      x = x.nextSibling;
    }
    while (x && !((/text/.test(x.type)) || x.disabled));