Как организовать такую маску ввода?
Не могу найти готовое решение...
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуlet parts = Array.from(document.querySelectorAll('[data-type="number"]')).sort((a, b) => +a.dataset.order > +b.dataset.order),
data = [
/^\+\d$/,
/^\d{3}$/,
[/^\d{3}\-\d\d\-\d\d$/, v => /^(\d{3})\-$/.test(v) ? RegExp.$1 : v.replace(/-/g, '').replace(/((?:^\d\d\d(?!-)|\d\d(?!$)))/g, "$1-")]
];
parts.forEach(e => e.addEventListener('input', check));
function check(){
let id = +this.dataset.order;
let regexp = Array.isArray(data[id]) ? data[id][0] : data[id],
formatter = Array.isArray(data[id]) && data[id][1] ? data[id][1] : null;
if(this.value.trim() === '')
if(parts[id - 1])
parts[--id].focus();
if(formatter !== null){
this.value = formatter(this.value);
}
if(regexp.test(this.value)){
if(parts[id + 1])
parts[++id].focus();
}
}
input[placeholder]{text-align: center;}
input::-webkit-input-placeholder{opacity: 1; transition: opacity 0.3s ease;}
input:focus::-webkit-input-placeholder{opacity: 0; transition: opacity 0.3s ease;}
input:focus{outline: none;}
<input type='text' data-type='number' data-order='0' size='1' maxlength='2' placeholder='+7' autofocus />
<input type='text' data-type='number' data-order='1' size='1' maxlength='3' placeholder='123' />
<input type='text' data-type='number' data-order='2' size='6' maxlength='9' placeholder='456-78-90' />
Попробуйте так:
var code = document.getElementById('code');
var country = document.getElementById('country');
var number = document.getElementById('number');
countryHandler = function() {
var text = document.getElementById('country').value;
if(text.length > 1 && text[0] =='+'){
code.focus();
}
};
codeHandler = function() {
var text = document.getElementById('code').value;
if(text.length > 2){
number.focus();
}
};
numberHandler = function() {
var text = document.getElementById('number').value;
if(text.length > 6){
//code.focus();
number.blur();
}
};
country.oninput = countryHandler;
country.onpropertychange = country.oninput;
code.oninput = codeHandler;
code.onpropertychange = code.oninput;
number.oninput = numberHandler;
number.onpropertychange = number.oninput;
<form id="form">
<input type="text" name="country" id="country">
<input type="text" name="code" id="code">
<input type="text" name="number" id="number">
</form>
Тут конечно не учтены все условия, но думаю там понятно что нужно делать дальше.
Рекомендую легковесное решение на чистом javascript - https://github.com/BankFacil/vanilla-masker
Подключение скрипта:
<head>
<script src="/vanilla-masker.js"></script>
</head>
Использование в Вашем случае:
<input type="text" id="phone_country" placeholder="+7" maxlength="2">
<input type="text" id="phone_code" placeholder="123" maxlength="3">
<input type="text" id="phone_other" placeholder="123-45-67" maxlength="9">
...
<script>
(function() {
VMasker(document.getElementById("phone_country")).maskPattern('(+9');
VMasker(document.getElementById("phone_code")).maskPattern('(999');
VMasker(document.getElementById("phone_other")).maskPattern('(999-99-99');
})();
</script>
Общая демка из исходников:
http://bankfacil.github.io/vanilla-masker/demo.html
И код общей демки из исходников:
https://github.com/BankFacil/vanilla-masker/blob/master/public/index.html
JQuery Mask plugin - в конце body добавьте
<script type="text/javascript" src="js/jquery.mask.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.date').mask('00/00/0000');
$('.time').mask('00:00:00');
$('.date_time').mask('00/00/0000 00:00:00');
$('.phone').mask('+7(000)000-0000');
});
</script>