Как связать три поля для ввода телефона?

Question

[Конан Варвар]

Всем привет.
Подскажите пожалуйста, как мне связать три input-а для ввода телефона. Чтобы после ввода 3х символов в первом input перескакивало на следующий и соответственно на последний.

Answer 1

[Конан Варвар]

Сам нашел решение.

Answer 2

[Влад]

Держи :)

Comments

[Конан Варвар]

Спасибо, но там код выглядит как атомная война. Я пожалуй лучше сам что-то придумаю. Но спасибо за потраченное время :)

[Kovalsky]

JaredWinter: у вас не получится придумать что-то менее атомное, т.к. в примере приведёно минимально возможное количество операций для достижения желаемого, алгоритм очень компактный.

Ограничение вводимых символов до цифр, использование специальных клавиш разрешено,

// Пример написан в 2014 году, вероятно тогда эта часть кода была нужна
// Сейчас type="number" работает везде, насколько я понимаю.

function (e) {
    // Allow: backspace, delete, tab, escape, enter and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
         // Allow: Ctrl+A
        (e.keyCode == 65 && e.ctrlKey === true) || 
         // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
             // let it happen, don't do anything
             return;
    }
    // Ensure that it is a number and stop the keypress
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
        e.preventDefault();
    }
}

Ограничение размера текста в полях,

if (e.target.value.length > digitsPerBox) {
        e.target.value = e.target.value.substr(0,digitsPerBox);
    }

Переход к следующему полю, если текущее заполнено.

if (e.target.value.length == digitsPerBox) {
        var t = $( e.target );
        if (t.attr("id") == "i4") {
            /// SUBMIT HERE
            var txt = $("#i1").val() + "-" + $("#i2").val() + "-" + $("#i3").val() + "-" + $("#i4").val();
            alert(txt);
        } else {
            /// AUTO FOCUS NEXT BOX
            t.next().focus();
       }
    }

Сами видите, лишних действий тут нет, кроме первой части кода. Эффективнее только маски, которые предложил Stalker_RED.

Answer 3

[Stalker_RED]

Никак не связывать, и вообще не разбивать поле на три части (что за дичь?) а использовать маску.

Comments

[Конан Варвар]

В смысле дичь, ты издеваешься? Это дизайн, а не дичь.

Answer 4

[ant1vit]

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();
        }
    }
}

<div>
    <input type="text" onkeyup="testJump(this);" maxlength="2" size="2">
    <input type="text" onkeyup="testJump(this);" maxlength="3" size="3">
    <input type="text" onkeyup="testJump(this);" maxlength="7" size="7">
  
</div>