Input Global - Auto Mask

by Lucaskazama

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.16/css/intlTelInput.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.16/js/intlTelInput.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.16/js/utils.min.js"></script>
<script src="https://cdn.rawgit.com/meetselva/attrchange/master/js/attrchange.js"></script>
<script src="https://cdn.rawgit.com/meetselva/attrchange/master/js/attrchange_ext.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.inputmask.bundle.min.js"></script>
<form method="get" action="#">
  <input type="tel" id="phone-number" required>
  <div>
    <span id="valid-msg" class="hide-validation valid-msg">✓ Valid</span>
    <span id="error-msg" class="hide-validation"></span>
  </div>
</form>

CSS

input{
  border-radius: 1em;
  padding: 2em 5em;
  font-size: 1em;
  border: 1px solid gray;
}

.hide-validation{
  display: none;
}

.valid-msg{
  color: green;
}

.error-msg{
  display: block;
  color: red;
}

body{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #222222;
}

JavaScript

const inputPhoneIdStr = "#phone-number",
  errorMsg = document.querySelector("#error-msg"),
  validMsg = document.querySelector("#valid-msg");

const inputPhoneId = document.querySelector(inputPhoneIdStr)

var errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];

var reset = function() {
  inputPhoneId.classList.remove("error-msg");
  errorMsg.innerHTML = "";
  errorMsg.classList.add("hide-validation");
  validMsg.classList.add("hide-validation");
};

var iti = intlTelInput(inputPhoneId, {
  initialCountry: "auto",
  autoPlaceholder: "aggressive",
  preferredCountries: ["br"],
  hiddenInput: "phone-number-hidden[full]",
  geoIpLookup: function(success, failure) {
    $.get("https://ipinfo.io", function() {}, "jsonp").always(function(resp) {
      var countryCode = (resp && resp.country) ? resp.country : "br";
      success(countryCode);
    });
  },
  separateDialCode: true,
});

inputPhoneId.addEventListener('blur', function() {
  reset();
  if (inputPhoneId.value.trim()) {
    if (iti.isValidNumber()) {
      validMsg.classList.remove("hide-validation");
    } else {
      inputPhoneId.classList.add("error-msg");
      var errorCode = iti.getValidationError();
      errorMsg.innerHTML = errorMap[errorCode];
      errorMsg.classList.remove("hide-validation");
    }
  }
});


function formatMaskPhone(str) {
  numeros = "1234567890";
  substituir = "9999999999";
  novastr = "";
  for (i = 0; i < str.length; i++) {
    troca = false;
    for (a = 0; a < numeros.length; a++) {
      if (str.substr(i, 1) == numeros.substr(a, 1)) {
        novastr += substituir.substr(a, 1);
        troca = true;
        break;
      }
    }
    if (troca == false) {
      novastr += str.substr(i, 1);
    }
  }
  return novastr;
}

$(inputPhoneIdStr).attrchange('polling', {
  callback: function(attrchanges) {
    const placeholderVal = attrchanges['placeholder'].newValue;
    const maskFormated = formatMaskPhone(placeholderVal);
   ...