Форум

shaltay · #1 (**permalink**) 10.05.2011, 14:24

Доброго времени!
Делаю форму для оплаты карточками. Нужно сделать как в стандартных вводах серийника - 4 поля по четыре символа. После ввода первых четырех, курсор перемещается в следующее поле.

Искал в интернете, но ничего похожего не нашел.

Заранее спасибо!

walik · #2 (**permalink**) 10.05.2011, 14:35

<html>
<head>
<script>
function check(obj) {
	if (obj.value.length == 4) {
		var next = obj.nextSibling;
		while(next.nodeType != 1 && next.nextSibling)
			next = next.nextSibling;
		if (next.nodeType == 1)
			next.focus();
	}
}
</script>
</head>
<body>
<input type="text" size="4" maxlength="4" onkeyup="check(this);" /> - 
<input type="text" size="4" maxlength="4" onkeyup="check(this);" /> - 
<input type="text" size="4" maxlength="4" onkeyup="check(this);" /> - 
<input type="text" size="4" maxlength="4" onkeyup="check(this);" />
</body>
</html>

shaltay · #3 (**permalink**) 10.05.2011, 15:33

Спасибо!

shaltay · #4 (**permalink**) 10.05.2011, 15:48

<html>
<head>
</head>
<body>
<form>
<input type="text" size="4" maxlength="4" onkeyup="check(this);" /> -
<input type="text" size="4" maxlength="4" onkeyup="check(this);" /> -
<input type="text" size="4" maxlength="4" onkeyup="check(this);" /> -
<input type="text" size="4" maxlength="4" onkeyup="check(this);" />
<input type="checkbox" />
<input type="submit" />
</form>
</body>
</html>

А вот если есть такая форма и нужно кнопку submit сделать активной только тогда, когда все поля заполнены? Как быть в этот раз?

walik · #5 (**permalink**) 10.05.2011, 15:54

Добавьте еще пару строчек кода которые буду проверять поля и менять состояние кнопки.
На словах: пробегаете по всем полям, и если есть хоть одно поле не заполнено, то кнопки придаете стиль disabled = 'disabled'. Если же все поля заполнены то убираете: disabled = '';

shaltay · #6 (**permalink**) 11.05.2011, 10:00

Да, примерно так и сделал. Спасибо!

Halloween · #7 (**permalink**) 14.04.2013, 01:53

А не подскажете, почему перестал работать этот самый перескок?

http://msufootball.ru/tournaments/op...4/application/

<script>
function Jump(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();
        }
    }
}
</script>

Форум

Справочник

Discord чат

Курсы javascript