html:
<form id = "mainForm">
<div id = "div1">
<input type="text" name="input-1" id = "input1" value="" size="10px" onkeyup="testJump(this);" maxlength="5" >
<input type="text" name="input-2" id = "input2" value="" size="10px" onkeyup="testJump(this);" maxlength="5" >
<input type="text" name="input-3" id = "input3" value="" size="10px" onkeyup="testJump(this);" maxlength="5" >
<input type="text" name="input-4" id = "input4" value="" size="10px" onkeyup="testJump(this);" maxlength="5" >
<select id="listColor">
<option value="green">
Зеленый
</option>
<option value="red">
Красный
</option>
<option value="blue">
Синий
</option>
<option value="yellow">
Желтый
</option>
</select>
</div>
<div id = "div2">
<input type="reset" name="Очистка формы"></td>
<button id = "showButton" >Отобразить данные</button>
<button id = "insertButton">Вставка текстового поля</button>
</div>
</form>
функция для автоматического перехода фокуса:
function testJump(x){
var ml = ~~x.getAttribute('maxlength');
if(ml && x.value.length >= ml){
do{
x = x.nextSibling;
}
while(x && !(/text/.test(x.type)));
if(x && /text/.test(x.type)){
x.focus();
}
}
}
функция взята отсюда:Как перейти к следующему input'у при заполнении текущего?
Однако фокус не переходит