Jquery Uluslararası Telefon Textbox Masklı (International Phone Input With Mask)

Merhabalar.

Çoklu dil destekleyen sistemlerde hem uluslararası telefon validasyonu hemde bunun mask uygulaması için hazır bir script bulmak epey zor.

Aşağıdaki örnek bu iki özelliğinde olduğu bir örnek işinizi görecektir.

Uygulamada jquery ve buna eklenti olarak intTelInput, Jquery Mask kullanılmıştır. intTelInput eklentisi google'a ait libphonenumber kütüphanesini kullanmakta.

Öncelikle Head tagı altına aşağıdaki cdn scriptlerini ekliyoruz.
Body
Script 
        
function validate() {

	var number = $("#phone").intlTelInput('getNumber');
	iso = $("#phone").intlTelInput('getSelectedCountryData').iso2;

	var exampleNumber = intlTelInputUtils.getExampleNumber(iso, 0, 0);
	if (number == '')
		number = exampleNumber;

	var formattedNumber = intlTelInputUtils.formatNumber(number, iso, intlTelInputUtils.numberFormat.NATIONAL);
	var isValidNumber = intlTelInputUtils.isValidNumber(number, iso);
	var validationError = intlTelInputUtils.getValidationError(number, iso);

	console.log(number);
	console.log(formattedNumber);
	console.log(intlTelInputUtils.formatNumber(number, iso, intlTelInputUtils.numberFormat.INTERNATIONAL));
	console.log(intlTelInputUtils.formatNumber(number, iso, intlTelInputUtils.numberFormat.E164));
	console.log(intlTelInputUtils.formatNumber(number, iso, intlTelInputUtils.numberFormat.RFC3966));
	console.log(isValidNumber);
	console.log(validationError);
}

$("#phone").intlTelInput({
	geoIpLookup: function (callback) {
		$.get("http://ipinfo.io", function () { }, "jsonp").always(function (resp) {
			var countryCode = (resp && resp.country) ? resp.country : "";
			callback(countryCode);
		});
	},
	//hiddenInput: "full_number",
	initialCountry: "auto",
	separateDialCode: true,
	//autoPlaceholder: "off",
});

$('#phone').on('countrychange', function (e) {

	$(this).val('');
	var selectedCountry = $(this).intlTelInput('getSelectedCountryData');
	var dialCode = selectedCountry.dialCode;
	var maskNumber = intlTelInputUtils.getExampleNumber(selectedCountry.iso2, 0, 0);
	console.log("placeholder > " + maskNumber);
	maskNumber = intlTelInputUtils.formatNumber(maskNumber, selectedCountry.iso2, 2);
	console.log("placeholder > " + maskNumber);
	maskNumber = maskNumber.replace('+' + dialCode + ' ', '');
	console.log("placeholder > " + maskNumber);
	mask = maskNumber.replace(/[0-9+]/ig, '0');
	//maskPlaceHolder = mask.replace(/[0-9+]/ig, '_');

	$('#phone').mask(mask, { placeholder: maskNumber });
});
Çalışan örnek için https://codepen.io/mcicekci/pen/qBqPbrz

Yorumlar

Yorum Gönder