Маска ввода телефона из нескольких input

#javascript #jquery

Как организовать такую маску ввода?



Не могу найти готовое решение...
    

Ответы

Ответ 1

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;}





Ответ 2

Попробуйте так:



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;

  
  
  





Тут конечно не учтены все условия, но думаю там понятно что нужно делать дальше.


Ответ 3

Рекомендую легковесное решение на чистом javascript - https://github.com/BankFacil/vanilla-masker

Подключение скрипта:


    



Использование в Вашем случае:





...




Общая демка из исходников:

http://bankfacil.github.io/vanilla-masker/demo.html

И код общей демки из исходников:

https://github.com/BankFacil/vanilla-masker/blob/master/public/index.html


Ответ 4

JQuery Mask plugin - в конце body добавьте