Как сделать можно такое поведение: при наборе номера телефона , курсор переходит на следующий input и в input-е с номером телефона уже ничего нельзя писать. Значение стейта на onChange не меняется, когда номер телефона полностью написан
3
-
при нажатии на клавишу или просто вписать 10 цифр и больше нельзя? – Horchynskyi 3 авг '17 в 7:24
-
просто вписать и нельзя. вот например как у них tinkoff.ru/cards/debit-cards/tinkoff-black/… внизу есть форма. там вписываем номер телефона и после сразу курсор на другом инпуте. и если я перейду на инпут с номером телефона и начну что-то набирать на onChange значение в стейте меняться не будет – werty 3 авг '17 в 7:37
-
ну я если клацаю на инпут после ввода переходит и можо редактировать – Horchynskyi 3 авг '17 в 7:40
добавить комментарий
|
1 ответ
$(function(){
$('input').on('keyup keydown', function(e){
//Фикс клавиши Backspace
if(e.keyCode == 8) {
$(this).attr('full', 'false');
return;
}
//Тут надо вешать атрибуты на инпуты и делать проверку к каждом
//Сейчас только на номере
if($(this).val().length >= 12){
$(this).val($(this).val().substr(0, 12));
$(this).attr('full', 'true');
$(this).next('input').focus();
//Нужно, чтобы последний символ не перекинулся на следующий инпут
return false;
}else $(this).attr('full', 'false');
});
$('input').on('blur', function(){
if($(this).attr('full') == 'true') $(this).addClass('inHold');
else $(this).removeClass('inHold');
});
$('input').on('focus', function(){
$(this).removeClass('inHold');
});
});
.inHold{
background: rgba(50,50,50,0.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="+7">
<input type="text">