Simple Phone Mask Demo v1.0.5

Default mask with flags and country selection (Ukraine):

new SimplePhoneMask('#phone1', {
	countryCode: 'UA',
	showFlag: true,
	allowCountrySelect: true,
});

US Phone mask with flags only (no country selection):

new SimplePhoneMask('#phone2', {
	countryCode: 'US',
	showFlag: true,
	allowCountrySelect: false,
});

Polish mask without flags:

new SimplePhoneMask('#phone3', {
	countryCode: 'PL',
	showFlag: false,
});

Polish mask with flags only (no country selection) and custom mask:

new SimplePhoneMask('#phone4', {
	countryCode: '+48',
	maskPattern: '___ ___ ___',
	showFlag: true,
	allowCountrySelect: false,
});

Auto-detected country by IP:

new SimplePhoneMask('#phone5', {
	detectIP: true,
	showFlag: true,
	allowCountrySelect: true,
});

Search in dropdown: NEW

// Search field inside the country dropdown (enabled by default)
new SimplePhoneMask('#phone6', {
	countryCode: 'UA',
	showFlag: true,
	allowCountrySelect: true,
	showSearch: true,
});

Preferred (pinned) countries: NEW

// Pin frequently used countries at the top of the list
new SimplePhoneMask('#phone7', {
	countryCode: 'UA',
	showFlag: true,
	allowCountrySelect: true,
	preferredCountries: ['UA', 'PL', 'US', 'GB'],
});

Phone validation on blur: NEW

new SimplePhoneMask('#phone8', {
	countryCode: 'UA',
	showFlag: true,
	allowCountrySelect: true,
	validate: true,
	errorMessage: 'Введіть повний номер телефону.',
	successMessage: '✓ Чудово!',
	onValidate: (isValid, value) => {
		console.log('Valid:', isValid, '| Value:', value);
	},
});

Programmatic validation (submit button): NEW

Validate on submit

const mask9 = new SimplePhoneMask('#phone9', {
	countryCode: 'US',
	showFlag: true,
	allowCountrySelect: true,
	validate: true,
});

document.querySelector('#validateBtn').addEventListener('click', () => {
	const valid = mask9.validate();
	// valid === true when number is complete
});

new SimplePhoneMask('#phone10', {
	countryCode: 'UA',
	showFlag: true,
	allowCountrySelect: true,
	darkTheme: true,
	showSearch: true,
	preferredCountries: ['UA', 'PL', 'DE'],
	validate: true,
});