How to organize such an input mask?

screenshot

I can not find a ready-made solution ...

4 answers 4

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' />

    Try this:

     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>

    Here, of course, all the conditions are not taken into account, but I think there it is clear what to do next.

      I recommend a lightweight solution in pure javascript - https://github.com/BankFacil/vanilla-masker

      Script connection:

       <head> <script src="/vanilla-masker.js"></script> </head>

      Use in your case:

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

      General demo from source:

      http://bankfacil.imtqy.com/vanilla-masker/demo.html

      And the code of the general demo from the source:

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

      • one
        Now everything is fine :) - Yuri
      • in this case, the cursor is not transferred to the next input - Vyacheslav Yashnikov
      • I agree, but there was no such task. Correct your question in this case - Ans

      JQuery Mask plugin - add body at the end

       <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>
      • Add a working code to the reply. Reference to the answer is not the answer! - Yuri
      • In this example, one input field, you need 3 - Vyacheslav Yashnikov
      • and then separate the value of 1 field by 3 in any way absolutely yes? everything is relative, as physicists would say - enter one, get 3 :-) because you can go so far as to enter each digit in a separate field - Eugene Bartosh