intl-tel-input
intl-tel-input copied to clipboard
jackocnr
Over-input... (no max length limit depending on selected country)
Hi. If phone number is like +375 (33) 444-55-66,
people are not restricted to input (33) 4445566778899423894372856325.
The same with ALL the countries over the world
Strict mode does not help. It works only if remove country auto-detecting.
Please, fix it
PS: Set maxlength="..." will not help. Cuz different countries has different phone lengths.
PSS: Hmm, I invented the crutch! xD
Set maxlength to placeholder string length :D
Workarounded it
<div class="col-xs-12 col-md-6">
<div class="form-group form-floating mb-2">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/css/intlTelInput.css">
<label for="phone-number">Phone</label>
<input type="tel" class="form-control" id="phone-number"{* placeholder="+_ (___) ___-____"*} required minlength="12" maxlength="24">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/js/intlTelInput.min.js"></script>
<script>
const phoneInput = document.querySelector("#phone-number");
if (phoneInput && phoneInput.id) {
window.intlTelInput(phoneInput, {
strictMode: true,
separateDialCode: true,
initialCountry: "auto",
geoIpLookup: callback => {
fetch("https://ipapi.co/json")
.then(res => res.json())
.then(data => callback(data.country_code))
.catch(() => callback("us"))
;
},
loadUtils: () => import("https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js")
});
function setPhoneMaxLength() {
let placeholder = phoneInput.getAttribute('placeholder');
if (placeholder) {
phoneInput.setAttribute('maxlength', (placeholder.length).toString());
} else {
phoneInput.removeAttribute('maxlength');
}
}
$('#' + phoneInput.id)
.removeAttr('maxlength')
.change(function () {
if (!$(this).attr('maxlength')) {
setPhoneMaxLength();
}
})
;
phoneInput.addEventListener("open:countrydropdown", () => {
phoneInput.removeAttribute('maxlength');
});
phoneInput.addEventListener("close:countrydropdown", () => {
phoneInput.removeAttribute('maxlength');
setPhoneMaxLength();
});
phoneInput.addEventListener("countrychange", () => {
phoneInput.removeAttribute('maxlength');
setPhoneMaxLength();
});
}
</script>
</div>
</div>
