One input of several?

Hello! Tell me how to implement this form of enter phone. For googlew comprehensive answer is not found, namely +7 should be fixed, but when entering the cursor itself was moved from the filled to the empty input. Filling was performed only by numbers and when you refresh the page everything would be reset. 59d91f3203318604972773.jpeg
June 14th 19 at 19:07
3 answers
June 14th 19 at 19:09
Solution
I found this solution, but there were a couple of questions:
1 How to enter only numbers
2 is the transition in the opposite direction during the removal of the rooms




<meta charset="utf-8">
<title>untitled Document</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>



<form action="#" method="post"> 

the <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">Draw</button> 
</form> 

June 14th 19 at 19:11
June 14th 19 at 19:13
1) Box with +7 you can make a block, or input with value="+7" and in the handler for input to write a return false or e.preventDefault.
2) Moving when you enter the number you need to catch at length filled symbols to put on the field a numeric type and/or oninput (but I did at key events, since IE does not fire when you delete a symbol, minus the fact that the behavior is not ideal and if you enter that, it will appear immediately and deleted, you can combine input event on the input and keydown delete if IE is not needed, only input) event to check is that you entered a number.
For example:
function(e) {//event Handler
 var value = e.target.value;
 value = parseInt(value);
 e.target.value = value;
 if(value.length>5){//Approximate number
/*
 At this point you can either use blur and focus, or programmatically call pressing tab.
*/
 retrurn false;
}
}


3) When you refresh the page and everything is reset.
And if you ask InputA button value=".

Find more questions by tags JavaScriptjQuery