<input type="text" name="phone" id="phone" placeholder="+7 (___) ___ - __ - __" inputmode="numeric" autocomplete="off" required="">
$('[name=phone]').mask('+7 (999) 999-99-99');
$("[name=phone]").click(function(){
var emptyPhone = $("[name=phone]").val();
if(emptyPhone.lenght=='4'){
$(this).setCursorPosition(4);
}
}).mask("+7 (999) 999-99-99", {autoclear: false});
$.fn.setCursorPosition = function(pos) {
if ($(this).get(0).setSelectionRange) {
$(this).get(0).setSelectionRange(pos, pos);
} else if ($(this).get(0).createTextRange) {
var range = $(this).get(0).createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
};
This Pen doesn't use any external CSS resources.