Over-input... (no max length limit depending on selected country)

[NDruce]

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

[NDruce]

How to listen intl-tel-input init event?

[NDruce]

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/intl-tel-input@25.3.0/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/intl-tel-input@25.3.0/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/intl-tel-input@25.3.0/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>