@13Feniks
Начинающий front-end разработчик

Один input из нескольких?

Здравствуйте! Подскажите как реализовать данную форму ввода телефона. По гуглив исчерпывающего ответа не нашёл, а именно +7 должно быть фиксированным, а при вводе номера курсор сам перемещался от заполненного input к пустому. Заполнение производилось только цифрами и при обновлении страницы всё обнулялось. 59d91f3203318604972773.jpeg
  • Вопрос задан
  • 204 просмотра
Решения вопроса 1
@13Feniks Автор вопроса
Начинающий front-end разработчик
Нашёл вот такое решение, но возникли пару вопросов:
1 Как вводить только цифры
2 Возможен ли переход в обратную сторону во время удаления номера

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#code').keyup(function(){ 
        if ($('#code').val().length > 2) { 
            $('#number').focus(); 
        } 
    });
}); 
</script>
</head>

<body>
<form action="#" method="post"> 
            
    <div>
   	  <label>+7</label> 
        <input type="tel" id="code" maxlength="3" name="code" required /> 
        <input type="tel" id="number" maxlength="7" name="number" required /> 
    </div>
    <button type="submit">Оформить</button>         
</form> 
</body>
</html>
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
djQuery
@djQuery
"Кодируем помаленьку" ("Сказка о Тройке")))
Рекомендую посмотреть: digitalbush.com/projects/masked-input-plugin
Ответ написан
Комментировать
@KnightForce
1) Поле с +7 можно сделать блоком, либо input с value=''+7" и в обработчике ввода написать return false или e.preventDefault.
2) Перемещение при вводе номера нужно отлавливать по длинне заполненных символов, поставить на поле числовой тип и/или на oninput (но я делал на key события, так как в IE не срабатывает при удалении символом, минус в том, что поведение не идеальное и если ввести не то, то оно появится и сразу удаляется, по этому можно комбинировать input событие на ввод, а keydown на удаление, если IE не нужны, то только input) событие проверять является то что введено числом.
Например:
function(e) {//Обработчик события
    var value = e.target.value;
    value = parseInt(value);
    e.target.value = value;
    if(value.length>5){//Примерное число
        /*
            В этом месте можно либо использовать blur и focus, либо программно вызывать нажатие на клавишу таб.
        */
        retrurn false;
    }
}


3) При обновлении страницы и так все обнулится.
А если по кнопке то задай инпутам value=''.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы