Если вы имеете в виду javascript, вы можете использовать метод «перейти к следующему вводу»:
Вот HTML:
<form id="ccform" action="cc_submit.php" method="post">
<fieldset id="ccnumber">
<input id="firstset" type="text" maxlength="4" />
<input id="secondset" type="text" maxlength="4" />
<input id="thirdset" type="text" maxlength="4" />
<input id="fourthset" type="text" maxlength="4" />
</fieldset>
</form>
А вот и JS:
var ccfields;
function moveToNext(e) {
var field = e.currentTarget;
var chars = field.value.length;
var setnumb = Number(field.id.substr(3,1)) - 1;
if(chars >= 4 && setnumb < 3) {
ccfields[setnumb + 1].focus();
}
}
window.onload = function() {
ccfields = document.getElementById("ccnumber").getElementsByTagName("input");
for (var i = 0; i < ccfields.length; i++) {
ccfields[i].onkeyup = moveToNext;
}
};
Конечно, вы захотите добавить функцию, которая проверяет наличие не чисел, и функцию для сбора четырех полей и объединения их в одну строку для возврата обратно в форму. Также неплохо использовать библиотеку js, такую как Jquery, чтобы гарантировать, что события обрабатываются одинаково, и упростить обход через входы, чтобы вы могли использовать такие атрибуты, как «имя», без каких-либо путаницы.
Но, как правило, если люди видят 4 поля, это облегчает ввод их числа, и для тех посетителей, которые думают «ах, я должен использовать мышь для каждого числа», они (или, по крайней мере, я ) рад, что страница достаточно умна, чтобы знать, чтобы перейти к следующему полю.