Hello. Tell me, please, how to make additions to the script correctly, so that in the second input field with id="din" only two numbers are allowed to enter, and after them three zeros are added through the space (as in the first field +7 is added)? Thank!

 window.addEventListener("DOMContentLoaded", function() { function setCursorPosition(pos, elem) { elem.focus(); if (elem.setSelectionRange) elem.setSelectionRange(pos, pos); else if (elem.createTextRange) { var range = elem.createTextRange(); range.collapse(true); range.moveEnd("character", pos); range.moveStart("character", pos); range.select() } } function mask(event) { var matrix = "+7 (___) ___ ____", i = 0, def = matrix.replace(/\D/g, ""), val = this.value.replace(/\D/g, ""); if (def.length >= val.length) val = def; this.value = matrix.replace(/./g, function(a) { return /[_\d]/.test(a) && i < val.length ? val.charAt(i++) : i >= val.length ? "" : a }); if (event.type == "blur") { if (this.value.length == 2) this.value = "" } else setCursorPosition(this.value.length, this) }; var input = document.querySelector("#tel"); input.addEventListener("input", mask, false); input.addEventListener("focus", mask, false); input.addEventListener("blur", mask, false); }); 
 <input type="text" name="" id="tel" class="f_input" /> <input type="text" name="" id="din" class="f_input" />

  • I think this will suit you: plugins.jquery.com/maskedinput - Gennady Danilchenko
  • No, sorry, it won't work - LADYX
  • I think you need to sort out a little with JavaScript yourself, read the documentation, books, do tasks. You have a lot of similar questions. It is not very rational to ask the community for each such question, if in fact you yourself can easily do all this by studying JavaScript to a good extent. And so the waste of your time and those who respond. - Dmitry Polyanin
  • one
    @DmitryPolyanin, but I think you shouldn’t waste your precious time on me. I would be very happy немного поразбираться с JavaScript самостоятельно on my немного поразбираться с JavaScript самостоятельно , but to my great regret I really, for all my strong desire, will not find so much time for this, unlike yours. You also have time to answer my question by teaching me, but also in addition to follow my story. All the best. - LADYX

2 answers 2

Something like this

 window.addEventListener("DOMContentLoaded", function() { function setCursorPosition(pos, elem) { elem.focus(); if (elem.setSelectionRange) elem.setSelectionRange(pos, pos); else if (elem.createTextRange) { var range = elem.createTextRange(); range.collapse(true); range.moveEnd("character", pos); range.moveStart("character", pos); range.select() } } function mask(event) { var matrix = "+7 (___) ___ ____", i = 0, def = matrix.replace(/\D/g, ""), val = this.value.replace(/\D/g, ""); if (def.length >= val.length) val = def; this.value = matrix.replace(/./g, function(a) { return /[_\d]/.test(a) && i < val.length ? val.charAt(i++) : i >= val.length ? "" : a }); if (event.type == "blur") { if (this.value.length == 2) this.value = "" } else setCursorPosition(this.value.length, this) }; function maskTi(event) { var nval = ""; var val = this.value.toString().replace(/\s000/, '').replace(/[\D]/g, ''); if (val.length != 0) { val = nval = val.replace(/^([1-9][0-9])\d*$/, '$1'); if (val[0] != 0) this.value = val + " 000"; else this.value = ""; } else { this.value = ""; } setCursorPosition(nval.length, this); } var input1 = document.querySelector("#tel"); input1.addEventListener("input", mask, false); input1.addEventListener("focus", mask, false); input1.addEventListener("blur", mask, false); var input2 = document.querySelector("#din"); input2.addEventListener("input", maskTi, false); }); 
 <input type="text" name="" id="tel" class="f_input" /> <input type="text" name="" id="din" class="f_input" />

  • Yes, thank you very much. Good luck! - LADYX

 window.addEventListener("DOMContentLoaded", function() { function setCursorPosition(pos, elem) { elem.focus(); if (elem.setSelectionRange) elem.setSelectionRange(pos, pos); else if (elem.createTextRange) { var range = elem.createTextRange(); range.collapse(true); range.moveEnd("character", pos); range.moveStart("character", pos); range.select() } } function mask(event) { var matrix = "+7 (___) ___ ____", i = 0, def = matrix.replace(/\D/g, ""), val = this.value.replace(/\D/g, ""); if (def.length >= val.length) val = def; this.value = matrix.replace(/./g, function(a) { return /[_\d]/.test(a) && i < val.length ? val.charAt(i++) : i >= val.length ? "" : a }); if (event.type == "blur") { if (this.value.length == 2) this.value = "" } else setCursorPosition(this.value.length, this) }; var input = document.querySelector("#tel"); input.addEventListener("input", mask, false); input.addEventListener("focus", mask, false); input.addEventListener("blur", mask, false); var din = document.getElementById("din"); din.addEventListener("keypress", controlNumber); din.addEventListener("keydown", controlNumber); function controlNumber(event){ din.addEventListener("input", addNumber); var code = event.keyCode; console.log(code) if (code == 8 || code == 46 ){ din.removeEventListener("input", addNumber); return; } else if (code > 34 && code < 41){ console.log("nen") return; } else if (code < 48 || code > 57) event.preventDefault(); } function addNumber(){ if(din.value.length == 2){ din.value += " 000"; } } }); 
 <input type="text" name="" id="tel" class="f_input" /> <input type="text" name="" maxlength="2" id="din" class="f_input" />;

  • "allow entering only two digits, and after them three zeros were added through the space" - Daniel
  • I forgot to change the input type to number. Changed - and this type, it turns out - does not support the maxlength attribute)). It is necessary to redo the code) - Dmytryk
  • Dmytryk, I greet you! Please see if zeros are added when focus is lost. But you need to add them immediately when entering numbers, as in the first field. - LADYX
  • that needs to be redone. I will delete the answer - Dmytryk February
  • earned. 53 minutes did) - Dmytryk February